Vue 阅读 471
Vue 第2.4章 表单绑定v-model

Vue 第2.4章 表单绑定v-model

2026-08-04 • lulubin

我们可以同时使用 v-bind 和 v-on 来在表单的输入元素上创建双向绑定:

https://cyfb.lulublog.cn/images/3/2026/08/XOG6gG3jC5fGW7637GgS7E2wZ7G1gg.png?sign=67c4b497ed4853951934f790a5ba2ee6&t=6ae76200

https://cyfb.lulublog.cn/images/3/2026/08/qh898Srjr8QQShqYf8ERxejfsezA4A.png?sign=c1f284286a1125cb432dafbbf71079f3&t=6ae76200

试着在文本框里输入——你会看到 p 里的文本也随着你的输入更新了。

为了简化双向绑定,Vue 提供了一个 v-model 指令,它实际上是上述操作的语法糖:

https://cyfb.lulublog.cn/images/3/2026/08/xagB3AavM8NpC0P71P5NcZyMgZAyV0.png?sign=2796ae7ef162517fff69cb7207174e35&t=6ae76200

v-model 会将被绑定的值与的值自动同步,这样我们就不必再使用事件处理函数了。

v-model 不仅支持文本输入框,也支持诸如多选框、单选框、下拉框之类的输入类型。

现在,试着用 v-model 把代码重构一下吧。

https://cyfb.lulublog.cn/images/3/2026/08/Gq531ozQOOd3d45dFyyyy145366OpD.png?sign=25a968e9c98d8a38bbb32511b2ad6054&t=6ae76200