做为一名前端攻城师,基础必须要好,这一章就来简单的说说什么是get,什么是set。
get和set简单来说就是监听属性的取值、赋值动作。说道这里,你肯定很懵逼,你说清楚啊,这么说谁能懂? 既然这样,那来个简单的小栗子演示一下get和set的操作吧:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>get/set</title>
</head>
<input type="text" v-model="test1">
<input type="text" v-model="test2">
<body>
<script>
let data = {
test1: '',
test2: ''
};
(function () {
//input改变,更新data里面的数据。
var dom = document.querySelectorAll('input');
for (var i = 0; i < dom.length; i++) {
if (dom[i].getAttribute('v-model')) {
let a = dom[i].getAttribute('v-model');
dom[i].oninput = function (e) {
data[a] = e.target.value;
};
}
};
//data数据改变。更改Input的value。
for (let list in data) {
Object.defineProperty(data, list, {
get: function () {
return list;
},
set: function (value) {
list = value;
for (x = 0; x < dom.length; x++) {
if (dom[x].getAttribute('v-model')) {
let a = dom[x].getAttribute('v-model');
if (data[a] != a) {
dom[x].value = data[a];
}
}
}
}
});
}
})();
//可在下面添加方法改变data下的值查看value是否改变。
</script>
</body>
</html>
好的,大家能看到在上面的代码中,写了一个简单的双向绑定的例子来展示了get/set的使用,当修改输入框的值时:
test.gif
从上图中可以看到,修改了输入框的值,然后在控制台打印的时候,会触发get方法,返回对应的值打印到控制台上。
对应的,如果在修改了data里面test1,test2的值,就会触发set方法,并运行里面包含的逻辑代码,如下:
test2.gif
可以看到,当在控制台修改了data里面test1和test2的值时,输入框里对应的值也发送了改变,这就是set方法里面的逻辑。
好的,相信到了这里,打架对set和get方法已经有了比较深刻的认知,希望大家能在工作中对js基础进一步的加强,溜了溜了~
网友评论