如何使用vue代码实现数据双向绑定

2023-07-04 13:07:11 112人浏览八月长安

摘要

这篇文章主要介绍“如何使用Vue代码实现数据双向绑定”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“如何使用vue代码实现数据双向绑定”文章能帮助大家解决问题。代码如下：* Object.d

这篇文章主要介绍“如何使用Vue代码实现数据双向绑定”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“如何使用vue代码实现数据双向绑定”文章能帮助大家解决问题。

代码如下：

* Object.defineProperty()    *  对对象的属性进行 定义/修改    * */    let obj = {x:10}    // 这两种方式都相对来说比较简单，直接，但是有些时候我们需要对对象的属性的修改和增加进行必要的干预//    obj.y = 20;//    obj.x = 100;//    obj.x = 'abc';////    let arr = [1,2,3];//    arr.length = 'abc';//不可更改//    console.log(arr);//    console.log(obj.x);//    delete obj.x;//    console.log(obj);    Object.defineProperty(obj, 'y', {      configurable: false,  //设置是否可删除 false为不可删除      value: 100    });    console.log(obj);    delete obj.y;//删除    console.log(obj);    //设置对象某个属性值的时候，顺便设置它的属性。enumerable 可枚举 configurable 可以删除否 writable 可改值否    Object.defineProperty(obj, 'z', {//enumerable 可枚举(没有则新添加)       enumerable: true,//为false时，for..in object.keys JSON.stringfy 不能取到该z属性      value: 10000    });    for (var attr in obj) {      console.log(attr);    }    Object.defineProperty(obj, 'm', {      writable: false,//可更改      value: 9    });    console.log(obj);    obj.m = 100;    console.log(obj);

以上总结了对象的defineProperty四个属性：configurable，enumerable，value，writable

接下来再深入认识下它的另外两个方法：set 以及get

注意：get和set不能与configurable，enumerable，value，writable同时存在

let obj = {x:10}    let y = 100;    Object.defineProperty(obj, 'y', {      get() {        //当obj的y属性被调用的时候触发，该方法的返回值将作为获取的结果        console.log('get');        return y;      },      set(value) {        //当obj的y属性被设置的时候触发        console.log('set', value);        y = value;      }    })    console.log(obj.y);    obj.y = 1;    console.log(obj.y);

效果图：

如何使用vue代码实现数据双向绑定

介绍完defineProperty了，最后我们一起看看如何简单的实现数据双向绑定吧！

<body>  <input type="text" id="age">  <h2></h2>  <script>    var ageElement = document.querySelector('#age');    var h2Element = document.querySelector('h2');    let obj = {};    Object.defineProperty(obj, 'age', {      get() {      },      set(value) {        ageElement.value = value;        h2Element.innerhtml = value;      }    })    obj.age = 10;    ageElement.oninput = function() {      obj.age = this.value;    }      </script>

效果图：

如何使用vue代码实现数据双向绑定