v-model双向绑定原理
首先要知道input输入框中有一个input事件,当用户输入时触发,他在元素值发生改变时立刻触发(value改变),在中也是一样的。
但是其从下拉框中选值不会触发。
学习地址:https://www.cnblogs.com/xuzhudong/p/8630610.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" :value="message" @input="message=$event.target.value">
<h2>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊'
}
});
</script>
</body>
</html>
在vue的mvvm模式中知道了,我们在model层获取的数据通过v-blind的绑定可以显示在view层,同时如果界面上操作数据,我们同时可以通过事件绑定v-on来反应到model层,这就是双向绑定。
上边的双向绑定可以直接通过v-model来实现(其实它就是一个语法糖,简化上边的两个操作)
<input type="text" v-model="message">