Vue怎么实现简易计算器

这篇文章主要介绍Vue怎么实现简易计算器，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

具体代码如下

<html>
<body>
<div id="demo">
 <h3>简单加减乘除计算器</h3>
 <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怎么实现简易计算器

以上是“Vue怎么实现简易计算器”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注行业资讯频道！

Vue怎么实现简易计算器

相关推荐