- Vue.js 3.0从入门到精通(视频教学版)
- 李小威编著
- 326字
- 2025-02-18 02:07:05
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指令的更多使用方法,后面的章节中还会详细讲解。