标签:type 常用 def 点绑定 tar key 依赖 fun 改变
作用:定义或修改一个对象上的相关属性及其相关的操作
语法: Object.defineProperty(obj, prop, descriptor)
其中:
obj: 需要被操作的目标对象
prop: 目标对象需要定义或修改的属性的名称
descriptor: 将被定义或修改的属性的描述符,分为数据描述符or存取描述符;
用bject.defineProperty(),简单实现输入框与数据的绑定:
<body>
<div>
<input type="text" id="input">
<span id="data"></span>
</div>
<script>
var obj = {};
console.log(obj);
Object.defineProperty(obj, 'value', {
get: function() {
console.log('调用了get方法');
},
set: function(newValue) {
console.log('调用了set方法,值为:' + newValue);
value = newValue;
document.getElementById('input').value = value;
document.getElementById('data').innerText = value;
}
})
document.getElementById('input').onkeyup = function(e) {
obj.value = e.target.value; //e.target相当于触发事件的dom节点
}
</script>
</body>
关于vue中双向绑定可以分为:1、data数据与输入框及显示的文本节点绑定 2、输入框修改影响data和文本节点的数据 3、data中数据的改变影响输入框及文本节点。
vue常用指令之一,单向绑定数据,常用与标签属性的绑定:<input type="text" id="input" :value="data">
其中value为input标签的一个属性,v-bind会使其内容变为js表达式,相当于把‘data‘变成一个变量,修改data的值会同步到标签属性中。
标签:type 常用 def 点绑定 tar key 依赖 fun 改变
原文地址:https://www.cnblogs.com/Zxq-zn/p/12252366.html