双向绑定
白话来说就是如果用户更新了View,Model的数据也自动被更新了,这种情况就是双向绑定
官方的话来说:当M层数据进行修改时,VM层会监测到变化,并且通知V层进行相应的修改,反之修改V层则会通知M层数据进行修改,以此也实现了视图与模型层的相互解耦
接下来用代码来展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双向绑定</title>
</head>
<body>
<div class="d">
<input type="text" v-model="date">
<p>{{ inputValue }}</p>
<p>{{ date }}</p>
</div>
<script src="js/vue.global.js"></script>
<script>
const vue = Vue.createApp({
data() {
return {
inputValue: '',
date: ''
}
},
mounted(){
setInterval(()=>{
let d = new Date();
this.date = d.getHours()+':'+d.getMonth()+':'+d.getSeconds();
},1000)
}
}).mount('.d')
setTimeout(function (){
vue.inputValue = 'ssw';
},2000)
// 延时2秒
</script>
</body>
</html>