v-model
v-model其实是一个语法糖，它的背后包含两个操作：
1，v-bind绑定一个value属性
2，v-on指令给当前元素绑定input事件
用v-bind和v-on实现双向绑定
<body>
<div id="app">
<input type="text" :value="message" @input="changeValue">
<h2>{{message}}</h2>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
message:"hello"
},
methods: {
changeValue(event){
this.message = event.target.value;
//当界面中产生一个事件时浏览器中会产生一个event对象
//target 事件属性可返回事件的目标节点
}
},
})
</script>
以上代码也可以如下写法
<body>
<div id="app">
<input type="text" :value="message" @input="message = $event.target.value">
<h2>{{message}}</h2>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
message:"hello"
},
methods: {
// changeValue(envent){
// this.message = envent.target.value;
// }
},
})
</script>
版权声明：本文为weixin_55803498原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。