本文讲一下:在vue中，用于组件双向绑定的语法，v-model。
什么是组件呢？简单来说，就是拼接成网页的一个个元素。
我们制作网页就跟搭积木一样，这放一个button ，那放一个表单，这放一个div，那放一个导航栏。
这些东西通通都叫做组件。
1、基本用法
v-model 一般用在input、textarea、select这些元素里。
它的后面会跟一个ref构造的响应式变量。
当输入框里的内容发生变化时，这个变量也会变化。
- 用在输入框内
例如，在input和textarea元素内，输入字符串的同时，这些字符串也会打印在其它网页组件上。
代码如下
Message is: {{ message }}
从渲染的结果，可以看出，Message is:后面的内容，会跟输入框里的内容保持一致。
如下图所示：
- 用在复选框内
在html中，复选框有选中、未选中两种状态。
选中，则该复选框对应的变量为true；未选中，则该复选框对应的变量为false。
这段代码渲染之后的结果是：当勾选时，label标签显示为true；当不勾选时，则显示为false。
如下图所示：
- 选择器
select选择器，也可以跟v-model配合使用。
需要注意的是：如果option里面有value属性，绑定的数据会与value值同步；如果option里面没有value，那么绑定的数据会直接使用option里面的值。
代码展示如下：
Selected: {{ selected }}
网页渲染结果如下图所示：
2、v-model 修饰符
v-model配备了修饰符，使用方法就是在v-model+点+修饰符即可。
这里，展示一下lazy修饰符的使用方法。
输入的内容: {{ message }}
lazy，顾名思义，就是懒惰的意思。
当使用lazy修饰符时，文本框输入的数据，并不会同步显示引用的位置。而是在敲入回车或者把光标移开之后，才会显示在引用的位置。
如下图所示：
除lazy修饰符，官方文档还提供了number、trim修饰符的使用方法。文章篇幅有限，这里不再一一展示了。
这些修饰符使用方法大同小异，大家可以在vue官网上查看具体的使用说明。
感谢阅读。如有代码方面的需求，欢迎合作。