js代码实现vue双向数据绑定实例

来源：动视网责编：小采时间：2020-11-27 20:03:17

js代码实现vue双向数据绑定实例

js代码实现vue双向数据绑定实例:双向数据绑定面试一般都会问到，首先要了解访问器属性用法，时间关系，先贴代码，有时间了分析一下，希望本文能帮助到大家。Object.defineProperty(obj,propertyName,{ get:function(){ //读取obj对象的propertyName属性时执行 }, set

推荐度：

点击下载本文 文档为doc格式

导读js代码实现vue双向数据绑定实例:双向数据绑定面试一般都会问到，首先要了解访问器属性用法，时间关系，先贴代码，有时间了分析一下，希望本文能帮助到大家。Object.defineProperty(obj,propertyName,{ get:function(){ //读取obj对象的propertyName属性时执行 }, set

双向数据绑定面试一般都会问到，首先要了解访问器属性用法，时间关系，先贴代码，有时间了分析一下，希望本文能帮助到大家。

Object.defineProperty(obj,propertyName,{ get:function(){
 //读取obj对象的propertyName属性时执行
 }, set:function(currvalue){
 //修改obj对象的propertyName属性时执行
 },
 });

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>js实现vue双向数据绑定 利用访问器属性</title></head><body>
 <input bind-value="value" type="text" placeholder="请输入..." id="user-input">
 <p bind-text="value" id="show-input"></p>
 <script>
 var elems=[document.getElementById('user-input'),document.getElementById('show-input')]; var data={
 initValue:'',
 }; function define(obj,propertyName) {
 Object.defineProperty(obj,propertyName,{
 get:function(){
 return this.initValue;
 },
 set:function(currvalue){
 this.initValue=currvalue; //同步p
 scan();
 },
 });
 }

 define(data,'value');
 data.value='';
 scan(); //监听事件
 elems[0].addEventListener('keyup',function(e){
 var e=e||window.event;
 data.value=e.target.value;
 }); function scan(){
 for(var i=0;i<elems.length;i++){ var ele=elems[i]; for(var j=0;j<ele.attributes.length;j++){ var attr=ele.attributes[j]; if(attr.nodeName.indexOf('bind')>=0){
 elems[1].innerHTML=data.value;
 elems[0].setAttribute('current-values',data.value);
 }
 }
 }
 } </script></body></html>

js代码实现vue双向数据绑定实例

推荐度：

点击下载本文 文档为doc格式

标签： VUE 实现 js

热门焦点

js代码实现vue双向数据绑定实例

js代码实现vue双向数据绑定实例

js代码实现vue双向数据绑定实例

最新推荐

猜你喜欢

热门推荐