这篇文章主要为大家详细介绍了vue实现简易计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue实现简易计算器的具体代码，供大家参考，具体内容如下
功能介绍
1、可以实现加减乘除
2、可以实现归零
3、实现退格
效果图一般本文来源gaodaimacom搞#^代%!码&网(般，样式随便写的，主要看功能以及实现方法
代码加解释
1、HTML部分
首先布局，把要做的样子写出来，为每一个按键绑定一个点击事件
<div id="box"> <table> <tr> <td></td><td></td><td colspan="2"></td></tr><tr> <td></td><td></td><td></td><td></td></tr><tr> <td></td><td></td><td></td><td></td></tr><tr> <td></td><td></td><td></td><td></td></tr><tr> <td></td><td></td><td></td><td></td></tr></table></div>
2、css部分，随便写的样式，不是很重要
input{ width: 100px; height: 100px; border: 1px solid black; line-height: 100px; text-align: center; border-radius: 10px; background-color: gainsboro; outline: none; } table{ background-color: #b3d7ff; margin: auto; }
3、最后是vm实例的部分
var vm = new Vue({ el:"#box", data:{ rel:"", }, methods:{ add(index){//这里就是按键绑定的方法，把获取到的值拼接到rel字符串上 this.rel +=index; }, result(){ this.rel = eval(this.rel);//这里是用eval方法进行一个计算 this.rel = String(this.rel);//这里的目的是为了显示在显示栏的数字还是字符串，只有字符串才能进行退格，归零的操作 }, del(){//这个就是退格的操作，用字符串的substring方法截取，每一次截取都是从第0个开始，到长度的前一个，就相当于退格了。 this.rel = this.rel.substring(0,this.rel.length-1); }, clean(){//这里就是归零的方法，通过给结果赋一个空字符串的方法来实现归零的操作，当然也可以使用删除的方法，例如unshift方法或者pop方法，直接赋值为空比较简便。 this.rel = ""; } } })
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持gaodaima搞代码网。
以上就是vue实现简易计算器功能的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue实现简易计算器功能
转载请注明原文链接：vue实现简易计算器功能
