《跟热饭一起学习vue吧》Part.7 用户输入双向绑定

用户输入的双向绑定

什么叫双向绑定？我们之前已经学习过，属性绑定后，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里的值，自动实现各种选择效果。

好了本节课就到这里，怎么样，是不是感觉很简单？？？