v-model原理

最新推荐文章于 2024-08-16 15:49:18 发布

Johnny.Freaking.Wrestling

最新推荐文章于 2024-08-16 15:49:18 发布

阅读量109

点赞数 1

本文链接：https://blog.csdn.net/dafzwwe/article/details/116376514

版权


```javascript
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <h2>{{msg}}</h2>
        <input type="text" :value="msg" @input="change">
        <!--<input type="text" v-model="msg">-->
    </div>
</body>
<SCRIPT src="js/vue.js"></SCRIPT>
<SCRIPT>
    var app = new Vue({
        el:"#app",//指定Vue实例的作用范围
        data:{
            msg:"Hell Vue"
        },
        methods:{
            change(event){
                this.msg=event.target.value;
            }
        }
    })
</SCRIPT>
</html>

上述代码中，

 <input type="text" :value="msg" @input="change">

的作用等同于`

<input type="text" v-model="msg">

v-model本质上就是v-bind和v-on的结合。通过v-bind将msg绑定给输入框，再通过v-on监听input事件。这里需要用到event，因为一旦在浏览器界面产生事件后都对产生一个event对象，而这个event里边就有target，target里边就有value，这个value就是输入框里的最新的值。