首页 > 其他 > 详细

vue简易计算器

时间:2019-11-04 11:51:11      阅读:74      评论:0      收藏:0      [点我收藏+]

一、代码实现

<body>
  <div id="app">
    <input type="text" v-model="n1">

    <select v-model="opt">
      <option value="+">+</option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
    </select>

    <input type="text" v-model="n2">

    <input type="button" value="=" @click="calc">

    <input type="text" v-model="result">
  </div>

  <script>
    // 创建 Vue 实例,得到 ViewModel
    var vm = new Vue({
      el: #app,
      data: {
        n1: 0,
        n2: 0,
        result: 0,
        opt: +
      },
      methods: {
        calc() { // 计算器算数的方法  
          // 逻辑:
          /* switch (this.opt) {
            case ‘+‘:
              this.result = parseInt(this.n1) + parseInt(this.n2)
              break;
            case ‘-‘:
              this.result = parseInt(this.n1) - parseInt(this.n2)
              break;
            case ‘*‘:
              this.result = parseInt(this.n1) * parseInt(this.n2)
              break;
            case ‘/‘:
              this.result = parseInt(this.n1) / parseInt(this.n2)
              break;
          } */

          // 注意:这是投机取巧的方式,正式开发中,尽量少用
          var codeStr = parseInt(this.n1)  + this.opt +  parseInt(this.n2)
          this.result = eval(codeStr)
        }
      }
    });
  </script>
</body>

 

vue简易计算器

原文:https://www.cnblogs.com/wangyuxue/p/11791221.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!