解释v-model:

v-model是拿来实现表单数据的双向绑定

绑定例子

1.普通文本输入框的双向绑定：

<div id="app">
  <input type="text" v-model="name">
  <h3>name:{{name}}</h3>
</div>
<body>
    <script src="../js/vue.js"></script>
    <script>
        const app=new Vue({
            el:'#app',//用于挂在要管理的元素
            data:{
                //定义数据
                name:'Betty'
            }
        })
    </script>
</body>

结果如下：

2. 复选框的双向绑定：

<div id="app">
  <input type="checkbox" v-model="lesson" value="music">
  <label>music</label>
  <input type="checkbox" v-model="lesson" value="chinese">
  <label>chinese</label>
  <input type="checkbox" v-model="lesson" value="math">
  <label>math</label>
  <input type="checkbox" v-model="lesson" value="english">
  <label>english</label>
  <h3>结果为：{{lesson}}</h3>
</div>
<body>
    <script src="../js/vue.js"></script>
    <script>
        const app=new Vue({
            el:'#app',//用于挂在要管理的元素
            data:{
                //定义数据
                lesson:[]
            }
        })
    </script>
</body>

结果如下：

?3.单选框的绑定

<div id="app">
  <input type="radio" v-model="hobby" value="打球">
  <label>打球</label>
  <input type="radio" v-model="hobby" value="读书">
  <label>读书</label>
  <h3>结果为：{{hobby}}</h3>
</div>
<body>
    <script src="../js/vue.js"></script>
    <script>
        const app=new Vue({
            el:'#app',//用于挂在要管理的元素
            data:{
                //定义数据
                hobby:''
            }
        })
    </script>
</body>

结果为：

根据单选框和复选框的绑定，我们需要注意data里面的v-model所绑定的属性对应，多个值对应[]，单个值对应:' '

4.选择列表的绑定

<div id="app">
  <select v-model="selected">
    <option>菠萝</option>
    <option>哈密瓜</option>
    <option>西瓜</option>
  </select>
  <h3>结果为：{{selected}}</h3>
</div>
<body>
    <script src="../js/vue.js"></script>
    <script>
        const app=new Vue({
            el:'#app',//用于挂在要管理的元素
            data:{
                //定义数据
                selected:''
            }
        })
    </script>
</body>

结果如下：

修饰符

修饰符有三个：lazy、number、 trim

.lazy绑定数据迷人实时更新，lazy可以在onChange触发?
.number返回数字类型的值，转换不成返回NaN
.trim去除数据的前后空格

?lazy的用法

<div id="app">
  <input type="text" v-model.lazy="name">
  <h3>name:{{name}}</h3>
</div>
<body>
    <script src="../js/vue.js"></script>
    <script>
        const app=new Vue({
            el:'#app',//用于挂在要管理的元素
            data:{
                //定义数据
                name:'Betty'
            }
        })
    </script>
</body>

结果如下：

?只有这个文本框失去焦点后，下面的name才会变成输入框里面的值

number的用法

<div id="app">
  <input type="number" v-model.number="num">
  <button @click="show()">显示值</button>
</div>
<body>
    <script src="../js/vue.js"></script>
    <script>
        const app=new Vue({
            el:'#app',//用于挂在要管理的元素
            data:{
                //定义数据
                num:''
            },
            methods:{
              show:function(){
                console.log(this.num)
              }
            }
        })
    </script>
</body>

结果为：