• 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>
  • 相关阅读:
    [c language] getopt
    编程经典问题
    一些常用的正则表达式
    [Head First Python]6. summary
    Java多线程
    JVM运行原理
    Struts2---自定义拦截器
    SpringMVC框架初步
    测试基本问题
    自动化测试
  • 原文地址:https://www.cnblogs.com/yoututu/p/14521225.html
Copyright © 2020-2023  润新知