表单输入绑定 对于Vue来说,使用v-bind并不能解决表单域对象双向绑定的需 求。所谓双向绑定,就是无论是通过input还是通过Vue对象,都能修 改绑定的数据对象的值。Vue提供了v-model进行双向绑定。本章将重 点讲解表单域对象的双向绑定方法和技巧。 1 实现双向数据绑定 对于数据的绑定,不管是使用插值表达式({ {}})还是v-text指 令,对于数据间的交互都是单向的,只能将Vue实例里的值传递给页 面,页面对数据值的任何操作却无法传递给model。 MVVM模式最重要的一个特性,可以说是数据的双向绑定,而Vue作 为一个MVVM框架,肯定也实现了数据的双向绑定。在Vue中使用内置的 v-model指令完成数据在View与Model间的双向绑定。 可以用v-model指令在表单<input>、<textarea>及<select>元素 上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新 元素。尽管有些神奇,但v-model本质上不过是语法糖。它负责监听用 户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。 v-model会忽略所有表单元素的value、checked、selected特性的 初始值,而总是将Vue实例的数据作为数据来源。这里应该通过 JavaScript在组件的data选项中声明初始值。 2 单行文本输入框 下面讲解最常见的单行文本输入框的数据双向绑定。 【例10.1】绑定单行文本输入框(源代码\ch10\10.1.html)。 在浏览器中运行程序,效果如图10-1所示;在输入框中输入“白 玉盘中看却无”,可以看到下面的内容也发生了变化,如图10-2所 示。
多行文本输入框 * 本节演示在多行文本输入框textarea标签中绑定message属性。 【例10.2】绑定多行文本输入框(源代码\ch10\10.2.html)