博客地址 ：https://www.cnblogs.com/sandraryan/
v-model 用于input标签，用于实现双向绑定，及时把数据的变化渲染在页面
双向绑定及原理
举个双向绑定的简单例子~ 然后展示一下v-model的简单原理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--<input type="text" v-model="message">-->
<!--<input type="text" :value="message" @input="valueChange">-->
<input type="text" :value="message" @input="message = $event.target.value">
<h2>{{message}}</h2>
<!-- 简单双向绑定 -->
<input type="text" v-model = 'm'>{{m}}
</div>
<script src="../js/vue.js"></script>
<!-- v-model 实现表单和数据的双向绑定 -->
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊'
},
methods: {
valueChange(event) {
this.message = event.target.value;
}
}
})
</script>
<!-- <script>
// 双向绑定
const app = new Vue({
el: '#app',
data : {
m: 'hi'
}
});
</script> -->
</body>
</html>