vue.js计算器,vue计算函数
本文主要详细介绍了vue实现简单计算器的功能。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享了vue实现简单计算器的具体代码，供大家参考。具体内容如下
功能介绍
1.可以实现加减乘除。
2.零可以实现。
3、实现退格。
效果一般，风格写的随便，主要看功能和实现方法。
代码加解释
1.HTML部件
首先布局，把你要做的事情写出来，每个键绑定一个click事件。
div id=box
桌子
tr
TD input type= button value= del @ click= del()/TD
TD input type= button value= C @ click= clean()/TD
TD colspan= 2 input type= text style= width:200 px value= v-model= rel /TD
/tr
tr
TD input type= button value= 7 @ click= add( 7 )/TD
TD input type= button value= 8 @ click= add( 8 )/TD
TD input type= button value= 9 @ click= add( 9 )/TD
TD input type= button value=/ @ click= add(/)/TD
/tr
tr
TD input type= button value= 4 @ click= add( 4 )/TD
TD input type= button value= 5 @ click= add( 5 )/TD
TD input type= button value= 6 @ click= add( 6 )/TD
TD input type= button value= * @ click= add( * )/TD
/tr
tr
TD input type= button value= 1 @ click= add( 1 )/TD
TD input type= button value= 2 @ click= add( 2 )/TD
TD input type= button value= 3 @ click= add( 3 )/TD
TD input type= button value=- @ click= add(-)/TD
/tr
tr
TD input type= button value= 0 @ click= add( 0 )/TD
tdinput type=buttonvalue=。@click=添加(.)/td
TD input type= button value= @ click= add()/TD
TD input type= button value== v-on:click= result()/TD
/tr
/表格
/div
2.css部分，随便写的风格，不是很重要。
输入{
宽度：100px
高度：100px
边框：1px纯黑；
行高：100px
文本对齐：居中；
边框半径：10px
背景色：gainsboro
大纲：无；
}
表格{
背景色：# b 3d 7 ff；
边距：自动；
}
3.最后，虚拟机实例部分
var vm=new Vue({
el:#box ，
数据：{
版本：，
},
方法：{
Add(index){//下面是键绑定的方法，将得到的值拼接到rel字符串上。
this.rel=index
},
结果(){
this . rel=eval(this . rel)；//下面是使用eval方法的计算
this . rel=String(this . rel)；//这里的目的是在显示栏中显示数字或字符串。只有字符串可以退格和归零。
},
Del(){//这是退格操作，由string的substring方法截取。每次拦截从第0个开始，长度到前一个，相当于退格。
this.rel=this.rel.substring(0，this . rel . length-1)；
},
Clean(){//这里是归零的方法，可以通过给结果赋一个空字符串来实现。当然也可以使用删除的方法，比如unshift方法或者pop方法。直接赋值null比较容易。
this . rel=“”；
}
}
})
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。