v-model,一颗语法糖

v-model的原理

v-model 双向数据绑定,只能应用到有value属性的节点
它是一颗语法糖:是v-bind:valuev-on:input的体现

示例

<div id="app">
        <div> v-bind,v-on<input type="text" :value="msg" v-on:input="valueChange"></div>
        <div>v-model<input type="text" v-model='msg'></div>
        <h3>{{msg}}</h3>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data(){
                return{
                    msg:"wj"
                }
            },
            methods:{
                valueChange(e){
                    console.log(e.target.value);
                    this.msg=e.target.value;
                }
            }
        })
    </script>
posted @ 2021-04-22 16:00  WJJ呀  阅读(75)  评论(0)    收藏  举报