- Vue.js 3.0从入门到精通(视频教学版)
- 李小威编著
- 326字
- 2022-07-27 18:37:48
5.1.5 v-model
v-model指令用来在表单<input>、<textarea>及<select>元素上创建双向数据绑定,它会根据控件类型自动选取正确的方法更新元素。它负责监听用户的输入事件以及更新数据,并对一些极端场景进行特殊处理。
【例5.14】v-model指令(源代码\ch05\5.14.html)。
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P85_164952.jpg?sign=1739471244-y36diFQ2uRbm6uLognalsZKUKWdOJun2-0-4857a43afee161e5855b1ef08faa447a)
在浏览器中运行程序,在输入框中输入“空调的价格是4988元”,在输入框下面的位置显示“空调的价格是4988元”,如图5-22所示。
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P86_28770.jpg?sign=1739471244-HC6mBdh0fi9Hh9y3rrVfiCRH0P3sbSkd-0-7a7cd5f3edeee5d488d6461186a4ff60)
图5-22 v-model指令
此时,在浏览器的控制台中输入:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P86_165362.jpg?sign=1739471244-Abj3mLGRPDhYYAfVW14NKaUJumQFWoqp-0-b13c5e9d3c4f81aaa2ee63b2a464897f)
按下Enter键,可以看到content属性的值也变成了“空调的价格是4988元”,如图5-23所示。
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P86_28786.jpg?sign=1739471244-UYtGslb1QRS9G8GZ5WOjf7nTxe4CesF2-0-fce1417f9da6e86a32fd3e2020d30555)
图5-23 查看content属性的值
还可以在实例中修改content属性的值,例如在浏览器的控制台中输入下面代码:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P86_165363.jpg?sign=1739471244-IsZvvOddoXPQhWrnI7flpt6UwY4Ykk2Q-0-41a5a3b3b9305ed4fc6a7c3c0bdc1eb3)
然后按下Enter键,可发现页面中的内容也发生变化,如图5-24所示。
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P87_28832.jpg?sign=1739471244-tzELtA1nPPiCrSNpGSsMJecODOaxYtWq-0-d3491846561c0f1b53991650e1c08b2a)
图5-24 v-model指令
从上面这个示例可以了解Vue的双向数据绑定,关于v-model指令的更多使用方法,后面的章节中还会详细讲解。