计算器效果

<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="btnClick"/>
   <input type="text" v-model="n3"/>
</div>

　　

<script>
   var vm = new Vue({
     el:"#app",
     data:{
       n1:0,
       n2:0,
       n3:0,
       opt:'+'
     },
     methods:{
       btnClick:function(){
//        方式1
//        switch(this.opt){
//          case '+':
//            this.n3 = parseInt(this.n1) + parseInt(this.n2);
//          break;
//          case '-':
//            this.n3 = parseInt(this.n1) - parseInt(this.n2);
//          break;
//          case '*':
//            this.n3 = parseInt(this.n1) * parseInt(this.n2);
//          break;
//          case '/':
//            this.n3 = parseInt(this.n1) / parseInt(this.n2);
//          break;
//        }

//        方式2
          var codestr = 'parseInt(this.n1)' + this.opt + 'parseInt(this.n2)';
          this.n3 = eval(codestr);
        }
     }
   })
</script>

　　

转载于:https://www.cnblogs.com/wuyunna/p/11276565.html