Vue学习——v-model双向绑定的原理

Vue中的v-model可以实现表单元素和数据之间的双向绑定，即修改表单的值，data中对应变量的值也会被修改。在data对应变量中修改值，被绑定的表单值也会被修改；所以称之为双向绑定。

首先我们在文本框中使用v-model绑定一个data中已声明的数据变量msg，h4标签中显示msg(以便观察数据变量是否改变)

<div id="ab">
     <input type="text" v-model="msg">
     <h4>{{msg}}</h4>
 </div>

这是js中Vue的代码

<script>
        const app = new Vue({
            el:'#ab',
            data:{
                msg:'起飞'
            }
        })
    </script>

运行时发现文本框中的数据被更改时，对应的数据变量也会被更改

其实它的实现原理很简单，就是先使用v-bind将文本框的value绑定给数据变量，实现变量改变，文本框值也随之改变的单向绑定；然后使用v-on绑定文本框的值改变事件，最后将事件对象中的文本框值传递给变量，即实现了双向绑定。话不多说，上代码：

不使用方法实现：

<div id="ab">
        <!-- <input type="text" v-model="msg"> -->
        <input type="text" name="" id="" v-bind:value="msg" v-on:input="msg = $event.target.value">
        <h4>{{msg}}</h4>
    </div>
    <script>
        const app = new Vue({
            el:'#ab',
            data:{
                msg:'起飞'
            }
        })
    </script>

使用方法实现：

   <div id="ab">
        <!-- <input type="text" v-model="msg"> -->
        <input type="text" name="" id="" v-bind:value="msg" v-on:input="Value">
        <h4>{{msg}}</h4>
    </div>
    <script>
        const app = new Vue({
            el:'#ab',
            data:{
                msg:'起飞'
            },
            methods:{
                Value(event){
                    this.msg = event.target.value;
                }
            }
        })
    </script>

它们的运行结果都为：

喜欢的朋友可以点赞加收藏哦，谢谢。