5.1.5　v-model

v-model指令用来在表单<input>、<textarea>及<select>元素上创建双向数据绑定，它会根据控件类型自动选取正确的方法更新元素。它负责监听用户的输入事件以及更新数据，并对一些极端场景进行特殊处理。

【例5.14】v-model指令（源代码\ch05\5.14.html）。

在浏览器中运行程序，在输入框中输入“空调的价格是4988元”，在输入框下面的位置显示“空调的价格是4988元”，如图5-22所示。

图5-22　v-model指令

此时，在浏览器的控制台中输入：

按下Enter键，可以看到content属性的值也变成了“空调的价格是4988元”，如图5-23所示。

图5-23　查看content属性的值

还可以在实例中修改content属性的值，例如在浏览器的控制台中输入下面代码：

然后按下Enter键，可发现页面中的内容也发生变化，如图5-24所示。

图5-24　v-model指令

从上面这个示例可以了解Vue的双向数据绑定，关于v-model指令的更多使用方法，后面的章节中还会详细讲解。