用户输入的双向绑定
什么叫双向绑定?我们之前已经学习过,属性绑定后,vue构造器中data的变量变化是会引起dom层中元素标签的属性值变化的,而且实时刷新。
那么双向绑定额意思,很显然就是说,如果标签内的属性值发生变化,那么vue构造器中data的变量值也会跟着变化!
那么我们用什么元素来测试这个功能较好呢,答案就是 输入框。我们可以通过用户输入的方式改变输入框的value值,来让绑定的data里的变量值发生变化。
但是在vue里,这个值不再用原生的value了,而是改为用v-mode这个指令来完成双向绑定。
那么我们怎么才能看到vue的data里的具体变量的值的变化呢?有个简单的办法,就是再弄一个元素标签,用来展示这个变量即可。
来看这个例子:
这个变量名叫message,在data中,初始值为Runoob这个字符串。
然后再dom里,通过一个p标签来显示它让我们肉眼可见。然后通过一个input输入框标签来控制它,双向绑定这个message变量,使用的指令就是 v-model = “变量名”
也就是说,如果成功,我们就可以通过更改这个输入框的内容,来让data里的message发生变化,然后带着p标签的内容一起变化。
测试效果,当然是成功的。
我们在输入框输入什么,上面的这个p标签的内容都会实时的同步。
这就是双向绑定值的指令:v-model
而v-model不止可以用于input,它还可以用于
select,textarea,checkbox,radio 等等,根据data里的值,自动实现各种选择效果。