<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue之computed(计算属性)详解get()、set()</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
姓:<input type="text" placeholder="firstName" v-model="firstName"><br>
名:<input type="text" placeholder="lastName" v-model="lastName"><br>
姓名1(单向):<input type="text" placeholder="FullName1" v-model="fullName1"><br>
姓名2(双向):<input type="text" placeholder="FullName2" v-model="fullName3"><br>
</div>
<script>
const demo = new Vue({
el: '#app',
data: {
firstName: 'A',
lastName: 'B',
fullName2: 'A B'
},
computed: {
//计算属性相当于data里的属性
//什么时候执行:初始化显示/ 相关的data属性发生变化
fullName1: {//计算属性中的get方法,方法的返回值就是属性值
get() {
return this.firstName + '---' + this.lastName
},
set(val) { }
},
fullName3: {
get() {//回调函数 当需要读取当前属性值是执行,根据相关数据计算并返回当前属性的值
return this.firstName + ' ' + this.lastName
},
set(val) {//监视当前属性值的变化,当属性值发生变化时执行,更新相关的属性数据
//val就是fullName3的最新属性值
console.log(val)
const names = val.split(' ');
console.log(names)
this.firstName = names[0];
this.lastName = names[1];
}
}
}
})
</script>
</body>
</html>
html代码:
<div id="app">
<ul>
<li><span><input type="checkbox" v-model="allcheck" /></span>全选</li><br />
<li v-for="item in datalist"><span><input type="checkbox" v-model="item.status" /></span>{{item.xueli}}</li>
</ul>
<input type="button" value="批量操作" />
</div>
js代码
<script>
var vm = new Vue({
el: "#app",
data: {
datalist: [
{ id: 1, xueli: '小学', status: false },
{ id: 2, xueli: '初中', status: false },
{ id: 3, xueli: '高中', status: false },
{ id: 4, xueli: '大学', status: true }
]
},
computed: {
allcheck: {
get: function () {
var newarr = [];
newarr = this.datalist.filter(function (item) {
return !item.status;
});
if (newarr.length == 0) {
return true;
}
},
set: function (value) {
this.datalist.forEach(function (item) { item.status = value });
}
}
}
});
</script>