1.案例一---复选框的全选功能
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>
javascript代码
<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>
1.1.分析set函数
set函数的传递参数value：点击全选复选框之后，allcheck的最新值。
1.2.分析get函数
点击 "小学" "初中" "高中" "大学"四个复选框之后，newarr数组的内容变化。
2.输入框内容实时改变，间接影响其他关联的输入框的输入值
<!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>
2.1.get函数分析
实时显示fullName3的值
2.2.set函数分析
姓名2(双向)的input输入框内容改变，实时影响姓和名input输入框内容的变化
参考---https://fullstack.blog.csdn.net/article/details/105598342