1.语法get方法
const 函数名 = computed(() => {
return xxx
})
import { computed, reactive } from 'vue' const number=ref<number>(18) const price = computed<string>(() => { return "价格是" +number.value+'元'; }); const message=ref<string>('颜色测试') const themeColor=computed(()=>(val)=>{ val.length>0?return 'red':return 'blue' })
2.语法 get set 方法,带有set参数,可以设置
const 函数名 = computed(() => {
get() { return 结果 },
set( val ){ }
})
import { computed, reactive } from 'vue'
const state = reactive({
number: 0
})
const doubleNumber = computed({
get() {
return state.number * 2
},
set(value) {
state.number= value / 2
}
})
console.log(doubleNumber .value) // 输出:0
doubleNumber.value = 6
console.log(state.number) // 输出:3
console.log(doubleNumber.value) // 输出:6
注:计算属性return function没有缓存的作用,建议直接写method