v-model绑定计算属性
set():计算属性的写入方法,当 allSelected 被修改时,通过 set 来更新 selectedKeys 或 keys 的值。例如,true 表示全选,所以将 selectedKeys 设置为 keys,false 则表示取消全选,清空 selectedKeys。使用 setter 修改源数据: 如果你希望通过 v-model 或其他方式修改 computed内的相关数据,你需要在计算
·
使用 setter 修改源数据: 如果你希望通过 v-model 或其他方式修改 computed内的相关数据,你需要在计算属性中提供一个 setter,通过它来更新原始数据。
例如,假设你希望通过 allSelected 来更新 selectedKeys(当全选时将 selectedKeys 设置为 keys,否则将其清空):
<template>
<input type="checkbox" v-model="allSelected"> Select All</input>
</template>
<script>
import { ref, computed } from 'vue';
export default {
setup() {
const keys = ref([1, 2, 3, 4]);
const selectedKeys = ref([1, 2]);
const allSelected = computed({
get() {
return keys.value.length === selectedKeys.value.length;
},
set(value) {
if (value) {
selectedKeys.value = [...keys.value]; // 全选
} else {
selectedKeys.value = []; // 清空选中
}
}
});
return {
keys,
selectedKeys,
allSelected
};
}
};
</script>
解释:
get():计算属性的读取方法,返回当前的 allSelected 状态。
set():计算属性的写入方法,当 allSelected 被修改时,通过 set 来更新 selectedKeys 或 keys 的值。例如,true 表示全选,所以将 selectedKeys 设置为 keys,false 则表示取消全选,清空 selectedKeys。
DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。
更多推荐


所有评论(0)