zoukankan      html  css  js  c++  java
  • v-model实现原理

    vue.js 则是采用数据劫持结合发布者-订阅者模式的方式,

    通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。

    <!DOCTYPE html>
    <html lang="en">
    
    <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>Document</title>
    </head>
    
    <body>
        <div id="app">
            <input type="text" id="a">
            <span id="b"></span>
        </div>
    </body>
    <script>
        var obj = {}; //定义一个空对象
        var val = ''; //赋予初始值
    
        Object.defineProperty(obj, 'val', { //定义要修改对象的属性
    
            get: function() {
                return val;
            },
    
            set: function(newVal) {
                val = newVal; //定义val等于修改后的内容
                document.getElementById('a').value = val; //让文本框的内容等于val
                document.getElementById('b').innerHTML = val; //让span的内容等于val
            }
    
        });
        document.addEventListener('keyup', function(e) { //当在文本框输入内容时让对象里你定义的val等于文本框的值
            obj.val = e.target.value;
    
        })
    </script>
    
    </html>
    
  • 相关阅读:
    正则表达式详解<一>
    multimap详讲
    map详讲<二>
    map详解<一>
    priority_queue详解
    容器适配器(一):queue
    用 input() 函数返回的数据是字符串类型
    学习python的基本了解
    学习oracle的SQL语句 练习
    oracle 练习题
  • 原文地址:https://www.cnblogs.com/kawayi/p/14435409.html
Copyright © 2011-2022 走看看