9. Vue 使用 v-model 实现双向数据绑定

v-model使用说明

在Vue框架中，能够绑定表单元素数据的命令有v-bind和v-model，但是v-bind只能单向绑定（将data中的数据绑定到View视图中），而v-model则可以双向绑定（也就是View视图与数据M双向绑定改变）。

但是v-model也有一定的局限性，只能绑定表单元素，则v-bind可以绑定各类元素。

那么什么是表单元素呢？

表单元素：input(radio, text, address, email....) 、select、checkbox、textarea等。

下面来写一个双向绑定的示例。

示例

    
    
    



    


        
{
    { msg }}

        
        

    

    
    

    

首先查看vm.msg数据，如下：

修改input中的数据，观察h4渲染的数据会同时修改，如下：