Vue 阅读 533
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=437100977890f19e434a70a18cb57286&t=6af9d700

https://cyfb.lulublog.cn/images/3/2026/08/qh898Srjr8QQShqYf8ERxejfsezA4A.png?sign=0b838589a3f3834f14f8b94ada4f3697&t=6af9d700

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

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

https://cyfb.lulublog.cn/images/3/2026/08/xagB3AavM8NpC0P71P5NcZyMgZAyV0.png?sign=f2f2fb9aefb561bf1781f1d82492b82a&t=6af9d700

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

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

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

https://cyfb.lulublog.cn/images/3/2026/08/Gq531ozQOOd3d45dFyyyy145366OpD.png?sign=15c4c9ef1f189270a6b18c0f516384ed&t=6af9d700