四，表单的双向绑定

     首先先理解什么是数据的双向绑定，所谓数据的双向绑定就是，数据的修改可以改变页面，而页面上修改也可以改变后端的数据。这就是数据的双向绑定
举例：

<input type="text" :value="num">
  <button @click="fn">单击+1</button>
 return{
              num:0
            }
        },
        //放置各种功能函数
        methods:{
         fn(){
            this.num ++;
         }
        }

4.gif

从上面的样例可以看到当我们修改input的值时,在单击按钮还是在之前的数据上+1,而不是input输入的值+1,这就是数据对页面的单向绑定

v-model 表单数据双向绑定

<input type="text" :v-model="num">
  <button @click="fn">单击+1</button>

 data(){
            return{
              num:0
            }
        },
        //放置各种功能函数
        methods:{
         fn(){
            this.num ++;
         }

这样就实现了表单双向绑定,既绑定了value的值,又监听input的事件

v-model仅限于
<input> 多选框需要用数组的形式
<select>
<textarea>
components

修饰符

.lazy

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述 (opens new window)输入法组合文字时)。你可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步：

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">

.number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

<input v-model.number="age" type="number">

这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。

.trim

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

<input v-model.trim="msg">