v-model实现简单计算器功能

案例篇：v-model实现简单计算器功能

• 初始化：

  • 新建一个项目， index.html。
  • 导入vue.js
<script src="vue.js"> </script>
  • 创建一个vue实例控制区域
    <div id="app"></div>
  • 创建一个实例

  <script type="text/javascript">
        new Vue({
            el:"#app",
            data:{
                
  
            },
            methods:{
                
            }
        })
    </script>
  

• 结构篇：

  • 编写HTML结构

  <div id="app">
            <input type="text" v-model="n1" />
            <select v-model="opt">
                <option>+</option>
                <option>-</option>
                <option>*</option>
                <option>/</option>
            </select>
            <input type="text" v-model="n2" />
            <button type="button" @click="calc">=</button>
            <input type="text" v-model="resault" />
        </div>
  

  • 编写业务逻辑

<script type="text/javascript">
       new Vue({
           el:"#app",
           data:{
               n1:0,
               n2:0,
               resault:0,
               opt:'+'

           },
           methods:{
               calc(){ //计算器算数的方法
                   //逻辑：判断操作符，获取两个input框中的值。
                   switch(this.opt){
                       case '+':
                       this.resault=parseInt(this.n1)+parseInt(this.n2)
                          break;
                       case '-':
                       this.resault=parseInt(this.n1)-parseInt(this.n2)
                          break;
                       case '*':
                       this.resault=parseInt(this.n1)*parseInt(this.n2)
                          break;
                       case '/':
                       this.resault=parseInt(this.n1)/parseInt(this.n2)
                          break;
                   }
                   
               }
           }
       })
   </script>

• 方式二：

  • eval() 将字符串解析，解析的结果就会进行返回

  <script type="text/javascript">
     new Vue({
         el:"#app",
         data:{
             n1:0,
             n2:0,
             resault:0,
             opt:'+'
  
         },
         methods:{
             calc(){ 
                 var codestr = 'parseInt(this.n1)' + this.opt +'parseInt(this.n2)'
                 this.resault=eval(codestr)              
             }
         }
     })
  </script>
  

• 测试篇：

  • 测试成功