Vue双向数据绑定：v-model指令

简介

v-model 指令是在表单控件元素上创建双向数据绑定，它会根据控件类型自动选取正确的方法来更新元素。
双向数据绑定也可以简单理解为：当后端数据发生改变时，前端页面也会自动改变；数据通过修改前端页面的时候，后端的数据内容也会随之发生改变。

组件内部双向数据绑定

1、在实例的data中，设置demo的起始内容

new Vue({
            el: '#box',
            data: {
                title: 'hello world',
                demo: 'this is a demo'
            }
        })

2、用v-model实现双向绑定，在input输入框里的内容会实时改变

中的内容。

  <input v-model="demo"/>
  <div>{{demo}}</div>

v-model修饰符

v-model修饰符，主要有‘.lazy’、‘.number’和‘.trim’。

• .lazy：默认情况下，‘v-model’在‘input’事件中同步输入框的值与数据，但添加了.lazy修饰符之后，从而转变为在‘change’事件中同步。简单点说就是延迟了
• .number：如果想自动将用户的输入值转换为’Number‘类型（如果原值的转换结果为‘NaN’则返回原值），可以添加.number修饰符给’v-model‘来处理输入值
• .trim：如果要自动过滤用户输入的首尾空格，可以添加.trim修饰符给’v-model‘上过滤输入