Vue 第2.4章 表单绑定v-model Vue 第2.4章 表单绑定v-model

11小时前

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

https://cyfb.lulublog.cn/images/3/2026/08/XOG6gG3jC5fGW7637GgS7E2wZ7G1gg.png

https://cyfb.lulublog.cn/images/3/2026/08/qh898Srjr8QQShqYf8ERxejfsezA4A.png

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

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

https://cyfb.lulublog.cn/images/3/2026/08/xagB3AavM8NpC0P71P5NcZyMgZAyV0.png

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

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

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

https://cyfb.lulublog.cn/images/3/2026/08/Gq531ozQOOd3d45dFyyyy145366OpD.png

阅读 16