对双向绑定的理解?

83 阅读1分钟

双向绑定

白话来说就是如果用户更新了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>