码迷,mamicode.com
首页 > Web开发 > 详细

js实现双向数据绑定,vue v-model原理

时间:2021-03-12 13:45:30      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:string   gif   rip   数据   dev   cti   init   body   原理   

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
</head>

<body>
    <div>
        <div id="content"></div>
        <input type="text" name="" id="inputName">
    </div>
</body>
<script>
    let obj = {
        name: ‘‘
    }

    let newObj = JSON.parse(JSON.stringify(obj))

    Object.defineProperty(obj,‘name‘,{
        get() {
            return newObj.name
        },
        set(val) {
            if(val === newObj.name) return
            newObj.name = val
            observer()
        }
    })

    function observer() {
        content.innerHTML = newObj.name
        inputName.value = newObj.name
    }

    setTimeout(() => {
        obj.name = ‘测试数据‘
    },1000)

    inputName.oninput = function() {
         obj.name = this.value
    }


</script>

</html>

js实现双向数据绑定,vue v-model原理

标签:string   gif   rip   数据   dev   cti   init   body   原理   

原文地址:https://www.cnblogs.com/yoututu/p/14521225.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!