Vue計算屬性computed的 get() 和 set() 方法的應用場景 : 全選
阿新 • • 發佈:2021-01-20
其實計算屬性中還有 get 和 set 方法
舉個’栗子’ 下面是頁面結構
需求 :
- 多選框全都選中 >> 全選框 – 選中
- 其他多選框沒有全部選中 >> 全選框 – 不選中
- 點選 選中 全選框 >> 其他多選框要 – 全都被選中
- 點選全選框 取消選中 >> 其他多選框也 – 全都不選中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
< meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p>請選擇個人愛好</p>
<!-- 這裡注意不要用 :checked="xx" 繫結選中狀態 這樣並不能形成雙向繫結的作用 -->
< p><input type="checkbox" v-model="checkAll">全選 checkAll : {{ checkAll }}</p>
<p><input type="checkbox" v-model="eat">吃飯 eat : {{ eat }}</p>
<p><input type="checkbox" v-model="sleep">睡覺 sleep : {{ sleep }}</ p>
<p><input type="checkbox" v-model="play">打豆豆 play : {{ play }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
new Vue({
el: '#app',
data: {
eat: false,
sleep: false,
play: false
}
})
</script>
</body>
</html>
計算屬性的get() : 從計算屬性中獲取值的時候觸發
比如 : {{ checkAll }} 呼叫計算屬性時會觸發(頁面剛載入時也會觸發)
其中的資料重新整理 {{ checkAll }} 重新呼叫再次觸發
computed: {
// 全選按鈕 v-model繫結
checkAll: {
get() {
// 根據 多選框是否全被選中 來控制 全選框是否選中
return this.eat & this.sleep & this.play
}
}
}
計算屬性的set() : 給計算屬性賦值時觸發
比如: 再此點選全選框時
computed: {
// 全選按鈕 v-model繫結
checkAll: {
get() {
// 根據 多選框是否全被選中 來控制 全選框是否選中
return this.eat & this.sleep & this.play
},
// 全選框的 選中狀態改變 -> 點選全選框時會觸發
set(val) { //val 是繫結的計算屬性值 -> 全選框的為 true / false
// 讓多選框的選中狀態跟全選框的選中狀態一樣
this.eat = val
this.sleep = val
this.play = val
}
}
}