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