极简原生双向绑定

最新推荐文章于 2023-12-23 18:52:28 发布

转载最新推荐文章于 2023-12-23 18:52:28 发布 · 130 阅读

JavaScript小笔记专栏收录该内容

26 篇文章

订阅专栏

本文通过一个简单的示例介绍如何使用JavaScript的Object.defineProperty方法实现数据的双向绑定。具体实现了输入框值与对象属性之间的同步更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本双向绑定仅在说明利用defineProperty的get和set方法对数据进行拦截，实现双向绑定

<template>
  <div class="hello">
    <h1>极简双向绑定</h1>
    <input type="text" id="txt_dom">
    <p id="p_dom"></p>
  </div>
</template>

<script>
export default {
  name: 'demo1',
    mounted(){
      var xxobj={};
        Object.defineProperty(xxobj,'xxval',{
            get:function () {
                //console.log('gggg');
                return 'xx123'
            },
            set:function (n) {
                //console.log(n)
                document.getElementById('txt_dom').value = n;
                document.getElementById('p_dom').innerHTML = n;
            }
        });
        document.addEventListener('keyup',function (e) {
            //console.log(e.target.value) //读取input dom节点的value值
            xxobj.xxval=e.target.value; //将dom节点值传给xxobj对象，并在写入属性时打印
        })
        //写入时触发，set 赋值即写入
        //xxobj.xxval=123;
        //读取时触发
       //console.log(xxobj.xxval);
    }
}
//defineProperty第一个参数属性所在的对象，第二个你要操作的属性，第三个是特性格式{}
//它实现的核心是同宫 Object.defineProperty(),对data的每个属性进行了get,set的拦截
  //只用Object.defineProperty()也可以实现双向绑定
</script>


<style scoped>

</style>