Vue 阅读 381
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=211430baec0b7d89b89dcddf9021e76a&t=6acd0400

https://cyfb.lulublog.cn/images/3/2026/08/qh898Srjr8QQShqYf8ERxejfsezA4A.png?sign=9f1332689286de40a97442f48c17987a&t=6acd0400

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

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

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

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

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

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

https://cyfb.lulublog.cn/images/3/2026/08/Gq531ozQOOd3d45dFyyyy145366OpD.png?sign=27bfb58a1d40519ecbc062825192f4e9&t=6acd0400

打赏

×

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开微信扫一扫,即可进行扫码打赏哦