网站建设公司一月赚多少,深圳H5网站开发,微网站开发技巧,会员制营销目录 self简单讲解1. 视图影响数据2. 数据影响视图3. 视图数据双向影响页面展示 百度 self
简单讲解 get和set方法是ES5中提供的#xff0c;因为是方法#xff0c;所以可以进行判断#xff0c;get 一般是要通过 return 返回的#xff1b;而 set 是设置#xff0c;不用返回… 目录 self简单讲解1. 视图影响数据2. 数据影响视图3. 视图数据双向影响页面展示 百度 self
简单讲解 get和set方法是ES5中提供的因为是方法所以可以进行判断get 一般是要通过 return 返回的而 set 是设置不用返回 Object.defineProperty(obj,属性名A,options);options:{ set:function(){},get:function(){} }当获取 obj.属性名A 的时候可以在设置或者获取的时候加一些行为obj.属性名A 1234; //赋值会触发set函数obj.属性名A; //获取会触发get函数 1. 视图影响数据 只有 视图影响数据 在 键盘事件 中直接对 对象的属性 进行赋值 就可以 实现改变数据。 body!-- 视图 --input typetext idiptscript// 数据var store {info: }var ipt document.querySelector(#ipt)ipt.addEventListener(keyup, function(e) {// console.log(888);// console.log(e.target.value)store.info e.target.value})/script
/body2. 数据影响视图 只有 数据影响视图 使用方法 Object.defineProperty() 配置项中 set 方法进行设置【因为】使用 方法对属性 进行 修改 时当 属性的值 发生 改变就会触发 set 方法在 set 方法中对 input 进行 赋值就实现了 数据影响视图 body!-- 视图 --input typetext idiptscript// 数据var store {info: }var ipt document.querySelector(#ipt)Object.defineProperty(store, info, {set: function(newv) {// console.log(777)console.log(newv)ipt.value newv}})/script
/body3. 视图数据双向影响 视图影响数据 input 的 value 发生改变 — 即 视图发生改变触发键盘弹起事件在键盘事件中对属性进行赋值属性值发生改变但其实属性值并未真正改变 1 和 2 是数据响应实现的效果不是原理【因为】用了 Object.defineProperty() 方法对属性值进行修改就只能通过方法中配置项中的 get 方法的 return 对属性值进行修改其他地方修改的属性值没用只能是知道属性值变了触发 set 方法在 set 方法中 使用 中间量对属性改变的值进行保存set 方法的参数就是改变的属性值在 get 方法中 return 中间量就实现了视图影响数据 数据影响视图 数据发生改变 — 即 对象的属性发生改变触发 方法 Object.defineProperty() 中配置项中的 set 方法set 方法的参数就是改变的属性值在 set 方法中对 视图进行修改 — 即 对 input 的 value 进行修改 !DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/title/headbody!-- 视图 --input typetext idipt /!-- span idcontent/span --script/** ** 数据 ****/var store {info: }var tempvar ipt document.querySelector(#ipt)var content document.querySelector(#content)ipt.addEventListener(keyup, function(e) {console.log(触发键盘事件----, 触发键盘事件)store.info e.target.value// content.innerText input中数据: store.info})Object.defineProperty(store, info, {/**** set 方法 该属性值发生改变就会触发 ****/set: function(newv) {console.log(set方法调用------, set方法调用)console.log(set方法中 newv ------, newv)ipt.value newv// store.info newvtemp newv},/**** get 方法 用该属性的时候触发 ****/get: function() {console.log(get方法调用------, get方法调用)// getter 要有 returnreturn temp}})/script/body
/html
页面展示 百度 vue.js利用Object.defineProperty实现双向绑定 在Vue.js中可以使用Object.defineProperty来实现数据的响应式从而实现双向绑定。以下是一个简单的示例展示如何使用Object.defineProperty来创建一个简单的双向绑定输入框 !DOCTYPE html
htmlheadtitleVue.js 双向绑定示例/title/headbodydiv idappinput v-modelmessage placeholder编辑我 /p输入的消息是: {{ message }}/p/divscript srchttps://unpkg.com/vue2.6.14/dist/vue.js/scriptscriptvar vm new Vue({el: #app,data: {message: }})// 使用Object.defineProperty实现响应式let data {}Object.defineProperty(data, message, {get() {return vm.message},set(newValue) {vm.message newValue}})// 当输入框的值变化时data.message也会更新// 当data.message更新时Vue的响应式系统会更新视图/script/body
/html 在这个例子中我们创建了一个Vue实例并通过v-model指令绑定了输入框到message数据属性。同时我们使用Object.defineProperty监听data.message的变化并在其发生变化时更新Vue实例的响应式数据。这样无论是视图层的更新还是数据层的更新都会同步到彼此实现了所谓的双向绑定。
