v-model实现表单元素的数据双向绑定与简易计算器实现

v-model

v-blind只能实数据的单向绑定从M绑定到N 无法双向绑定，使用v-model指令可以实现表单元素和model中数据的双向绑定

        <div id="app">
          <h4>{{msg}}</h4>  
    <!--       v-blind只能实现数据的单向绑定从M绑定到N 无法双向 -->
<!--     使用v-model指令可以实现表单元素和model中数据的双向绑定
 -->         
 　　　 <input type="text" v-model="msg">    
        </div>
        <script>
        var vm=new Vue({
            el:'#app',
            data:{    
                msg:'123456'
            },
          methods:{

          }
        })
        
        </script>

v-model实现简易计算器

  <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="cal">
     
        <input type="text" v-model="result">   
        </div>
        <script>
        var vm=new Vue({
            el:'#app',
            data:{    
            n1:0,
            n2:0,
            result:0,
            opt:'+'
            },
          methods:{
            cal(){
                //逻辑
                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)' + opt + 'parseInt(this.n2)',
           this.result = eval(codestr) */
          }
        })
        
        </script>