实现
前端日子看 Vue3
得 api 得时候发现 computed
已经是可读写
的了
然后最近写 Vue3
要实现一个 多全选
, 突然想起 computed
页面
<van-checkbox-group icon-size="18" v-model="selectArr">
<div v-for="(item, index) in cardList" :key="index" class="main_card">
<div class="card_content">
<div>
<van-checkbox :name="item.id">{{ item.name }}</van-checkbox>
</div>
</div>
</div>
</van-checkbox-group>
<div>
<van-checkbox v-model="selectAll">全選</van-checkbox>
</div>
js
import {reactive, ref, computed,} from "vue";
const cardList = reactive([
{
id: 1,
name: "蘋果",
},
{
id: 2,
name: "梨子",
},
]);
const selectArr = ref([]);
// computed
const selectAll = computed({
set(val) {
if (val) {
let selectArrs = [];
for (let i of cardList) {
selectArrs.push(i.id);
}
selectArr.value = selectArrs;
} else {
selectArr.value = [];
}
},
get(val) {
return selectArr.value.length === cardList.length;
},
});
练习
另外最近发现一个可以对 Vue3
的 api练习的网站