在vue中实现数据双向绑定的核心在于v-model
示例:
<input type="text" name=" " v-model="userName">
当输入框中的内容发生变化时,如用户在视图view输入hello world 此时我们在model层即用js处理逻辑代码的地方就会获取用户输入的值。
反之在model层给与userName一个值时,view层的值也会进行同步,简而言之双向指的是view层和model层 ,数据绑定即model上的数据,在view和model是同步绑定关系的。
用原生js模拟数据双向绑定
用js监听数据的变化并将变化的数据同步到页面,为了实现这个功能我们需要用到js的一个方法
Object.defineProperty
定义:Object.defineProperty()方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。
语法:Object.defineProperty(obj,prop,descriptor)
参数 | 说明 |
obj | 目标对象 |
prop | 需要定义的属性或方法的名字 |
descriptor | 目标属性所拥有的特性 |
实例效果
实现代码
通过创建一个obj对象,然后设置一个访问器属性hello,然后监听文本框的一个keyup事件,调用回调函数,重新设置obj.hello属性,其实际上是去调用内部属性set方法,在set方法更改文本框的value和p标签的innerHTML,从而达到数据的绑定。
<body>
<input type="text" placeholder="你的名字" id="input"/>
<h1>你好,<span id="a"></span></h1>
<script>
var obj = {};
Object.defineProperty(obj,'hello',{
set:function(val){
document.getElementById('input').value = val;
document.getElementById('a').innerHTML = val;
}
});
document.addEventListener('keyup',function(e){
obj.hello = e.target.value;
})
</script>
</body>