一、computed
默认返回一个ref对象,只读;可写的话,请使用配置对象形式(get,set)
用法
const cpt1 = computed(()=>{}}
const cpt2 = computed({
get(){}
set(val){}
})
示例
<template>
<div id="app">
<p>firstName: <input type="text" v-model="firstName"></p>
<p>lastName: <input type="text" v-model="lastName"></p>
<p>fullName: {{fullName}}</p>
<div class="title">
<label><input type="checkbox" v-model="allSelStatus">全选</label>
<button @click="hanleInvert">反选</button>
</div>
<ul>
<li v-for="item of list" :key="item"><label>
<input type="checkbox" v-model="item.checked">{{item.title}}</label>
</li>
</ul>
</div>
</template>
<script setup>
import { ref,computed } from 'vue'
const firstName = ref('');
const lastName = ref('')
// 默认getter
const fullName = computed(() =>{
return firstName.value + ' ' + lastName.value
})
const list = ref([
{ title : '数据一', checked : false,},
{ title : '数据二', checked : true,},
{ title : '数据三', checked : false,},
{ title : '数据四', checked : true,},
]);
//全选 setter getter
const allSelStatus = computed({
get(){
return list.value.every(item => item.checked)
},
set(val){
list.value = list.value.map(item => {
item.checked = val;
return item
})
}
})
</script>