做网站开发找哪家公司,上海今天最新新闻10条,关于网站开发的评审时间安排,上海展台设计前言#xff1a;
Computed属性属于Vue3中的响应式核心(与之共同说明的还有ref#xff0c;reactive#xff0c;watch...)
接受一个 getter 函数#xff0c;返回一个只读的响应式 ref 对象。该 ref 通过 .value 暴露 getter 函数的返回值。它也可以接受一个带有 get 和 set…前言
Computed属性属于Vue3中的响应式核心(与之共同说明的还有refreactivewatch...)
接受一个 getter 函数返回一个只读的响应式 ref 对象。该 ref 通过 .value 暴露 getter 函数的返回值。它也可以接受一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象。
像构造函数一样存在只读、只写属性。
只读
const count ref(1)
const plusOne computed(() count.value 1)console.log(plusOne.value) // 2plusOne.value // 错误
可写
const count ref(1)
const plusOne computed({get: () count.value 1,set: (val) {count.value val - 1}
})plusOne.value 1
console.log(count.value) // 0 templatediv classperson姓input typetext v-modelfirstName br名input typetext v-modellastName br全名span{{fullName}}/span brbutton clickchangeFullName全名改为li-si/button/div
/templatescript setup langts nameAppimport {ref,computed} from vuelet firstName ref(zhang)let lastName ref(san)// 计算属性——只读取不修改/* let fullName computed((){return firstName.value - lastName.value}) */// 计算属性——既读取又修改let fullName computed({// 读取get(){return firstName.value - lastName.value},// 修改set(val){console.log(有人修改了fullName,val)firstName.value val.split(-)[0]lastName.value val.split(-)[1]}})function changeFullName(){fullName.value li-si}
/script
