vue的vmodel的使用

{{msg}}

结果：

输入了 world

Vue中使用v-model指令来实现表单元素和数据的双向绑定。监听用户的输入，然后更新数据。

1. 因为input中的v-model绑定了msg,所以会实时将输入的内容传递给msg , msg发生改变。


2. 当msg发生改变时,因为上面使用了插值语法将msg的值插入到DOM中,所以DOM会发生响应的改变。所以通过v-model实现了双向的绑定。

v-model本质上是个语法糖，其实现原理包含两个步骤

1. 通过v-bind绑定一个value属性


2. 通过v-on指令给当前元素绑定input事件

v-on:input="" 用于动态监听用户输入的信息，在界面上产生一个事件后，浏览器会生成一个event对象，这个event对象就包含了输入的信息

除了上面的文本类型，v-model还能结合其他类型使用

1. v-model：radio

2. v-model：checkbox

单个复选框

多个复选框

结果：

3. v-model：select

结果：

1. lazy

v-model在默认情况下同步了输入框的数据，就是说输入框数据一有改变，对应的data中的数据就会自动发生改变。lazy修饰符可以让数据在失去焦点之后才更新

2.number

默认情况下，输入框得到的数据最后都会变成字符串形式。number修饰符可以将输入框得到的内容转为数字类型。

3.trim

trim修饰符可以去掉从输入框获取的内容的左右两边的空格 

作者：SleepWalkerLj
链接：https://www.jianshu.com/p/41dba59ab8e1
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。