Vue指令之v-model的应用

    v-model 指令，可以实现表单元素和Model中数据的双向数据绑定，通过v-model指令可以实现即时显示的效果，做到页面不刷新、不提交。注意：v-model 只能运用在表单元素中。
下面我们通过一个实例详细说明一下：

  <div id="app">　　<!--   创建一个vue容器-->
    <h4>{{ msg }}</h4>  <!--   显示文本-->
    <input type="text" style="width:100%;" v-model="msg">  <!--   输入文本-->
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '你编辑一下这句话试试，你写多少，上面就显示多少！'
      },
      methods: {
      }
    });
  </script>

练习：使用 v-model指令做一个简易的计算器小程序

  <div id="app">  <!--   创建一个vue容器-->
    <input type="text" v-model="n1">  <!--    数值A-->
    <select v-model="opt">  <!--    运算符-->
      <option value="+">+</option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
    </select>
    <input type="text" v-model="n2">  <!--    数值B-->
    <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;
          }

        }
      }
    });
  </script>

转载于:https://www.cnblogs.com/xwenbin/p/10373019.html