Vue实现简易计算器
更新时间:2020年02月25日 08:10:50 作者:CodingIsNotEasy
这篇文章主要为大家详细介绍了用Vue制作的简易计算器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Vue实现简易计算器的具体代码,供大家参考,具体内容如下
<html> <body> <div id="demo"> <h2>简单加减乘除计算器</h2> <p>请输入第一个数:<input type="text" v-model="firNum"></p> <p>请输入第二个数:<input type="text" v-model="secNum"></p> <p> <button @click="plus">+</button> <button @click="dec">-</button> <button @click="multiple">x</button> <button @click="devise">/</button> </p> <p>计算结果:<span v-text="result"></span></p> </div> <script> var v = new Vue({ el:"#demo", data:{ firNum:"", secNum:"", result:"" }, methods:{ plus:function () { // this.result = this.firNum + this.second; //这样只是字符拼接 this.result = parseInt(this.firNum) + parseInt(this.secNum); }, dec:function () { this.result = parseInt(this.firNum) - parseInt(this.secNum); }, multiple:function () { this.result = parseInt(this.firNum) * parseInt(this.secNum); }, devise:function () { this.result = parseInt(this.firNum) / parseInt(this.secNum); } } }) </script> </body> </html>
效果:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
这篇文章主要介绍了vue.js基于v-for实现批量渲染 Json数组对象列表数据,结合实例形式分析了vue.js使用v-for遍历json格式数据渲染列表相关操作技巧,需要的朋友可以参考下2019-08-08基于element-ui封装可搜索的懒加载tree组件的实现
这篇文章主要介绍了基于element-ui封装可搜索的懒加载tree组件的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2020-05-05vue项目Network: unavailable的问题及解决
这篇文章主要介绍了vue项目Network: unavailable的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-09-09解决vue-cli3创建使用iview定制主题javascriptEnabled找不到该配置项
这篇文章主要介绍了解决vue-cli3创建使用iview定制主题javascriptEnabled找不到该配置项问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-04-04
最新评论