zoukankan      html  css  js  c++  java
  • js实现双向数据绑定,vue v-model原理

    <!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>
  • 相关阅读:
    10.18
    10.16~10.17笔记
    JS
    10.8~10.11
    9.28~9.29
    9.27 代码笔记
    代码复习(9.26)
    9.19 链家
    9.18笔记
    9.17 定位
  • 原文地址:https://www.cnblogs.com/yoututu/p/14521225.html
Copyright © 2011-2022 走看看