模拟Vue双向绑定

21 篇文章 0 订阅
 <!--模拟Vue-->
    <script>
        window.onload = function(){
            Binding("ins","boxs");
        }

        function Binding(ins,boxs){
            // 创建数据对象
            window.data = {};
            // 创建数据键值对
            let _name = "";
            let my_input = document.getElementById('ins');
            let desc = document.getElementById("boxs");

            Object.defineProperty(window.data, "name", {
                // 返回数据
                get: function(){
                    return _name;
                },
                // 设置数据
                set: function(value){
                    _name = value;
                    // 将新数据添加到input和div元素内
                    my_input.value = value;
                    desc.innerHTML = value;

                }
            });
            // 获取input按钮, 并为其绑定事件
            my_input.addEventListener('input', function (ev) {
                new_data = ev.target.value;
                console.log("当前输入框内的数据为:",new_data);
                // 将框内的数据赋值给, data
                window.data.name = new_data
            })
        }
    </script>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值