Shulou(Shulou.com)05/31 Report--

In this article, the editor introduces in detail "the method of two-way data binding in vue". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "two-way data binding in vue" can help you solve your doubts.

The code is as follows:

* Object.defineProperty () * define / modify the properties of an object * * / let obj = {x obj.y 10} / / these two methods are relatively simple and direct, but sometimes we need to make necessary interventions to modify and add properties of the object / / obj.y = 20impact / obj.x = 100scarp / obj.x = 'abc' / let arr = [1Power2 let arr 3]; / / arr.length = 'abc';// unchangeable / / console.log (arr); / / console.log (obj.x); / / delete obj.x;// console.log (obj); Object.defineProperty (obj,' yearly, {configurable: false, / / set whether false is undeletable value: 100}) Console.log (obj); delete obj.y;// delete console.log (obj); / / when you set a property value of an object, set its property by the way. Enumerable can be enumerated configurable can be deleted No writable can be changed No Object.defineProperty (obj, 'enumerable, {/ / enumerable can be enumerated (if not added) enumerable: when true,// is false, for..in object.keys json.stringfy cannot get the z attribute value: 10000}); for (var attr in obj) {console.log (attr) } Object.defineProperty (obj, 'false,//, {writable: false,// changeable value: 9}); console.log (obj); obj.m = 100; console.log (obj)

The above summarizes the four defineProperty properties of the object: configurable,enumerable,value,writable

Next, let's take a closer look at its other two methods: set and get.

Note: get and set cannot exist with configurable,enumerable,value,writable

Let obj = {Object.defineProperty 10} let y = 100; Object.defineProperty (obj, 'get', {get () {/ / triggered when the y attribute of obj is called, the return value of the method will be taken as the obtained result console.log (' get'); return y }, set (value) {/ / trigger console.log ('set', value) when the y property of obj is set; y = value;}}) console.log (obj.y); obj.y = 1; console.log (obj.y)

After introducing defineProperty, let's take a look at how to simply implement two-way data binding.

Var ageElement = document.querySelector ('# age'); var h2Element = document.querySelector ('H2'); let obj = {}; Object.defineProperty (obj, 'age', {get () {}, set (value) {ageElement.value = value; h2Element [XSS _ clean] = value;}) obj.age = 10 AgeElement.oninput = function () {obj.age = this.value;}

After reading this, the article "two-way data binding in vue" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it yourself. If you want to know more about related articles, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.