在vue2中的计算属性,写法是配置项
在vue3中变成了组合式api,写法是一个函数,其余写法基本一致,如果计算出来的属性只读,可以写完简写形式,如何需要修改 则要配置getter和 setter
<template>
姓:<input type="text" v-model="person.firstName">
<br>
名:<input type="text" v-model="person.lastName">
<br>
全名:<input type="text" v-model="person.fullName">
<br>
<span>全名:{{person.fullName}}</span>
</template>
<script>
import {reactive,computed} from 'vue'
export default {
name: 'Demo',
setup(){
let person = reactive({
firstName:'张',
lastName:'三'
})
//计算属性——简写
/* person.fullName = computed(function(){
return person.firstName + '-' + person.lastName
}) */
//计算属性——完整写法
person.fullName = computed({
get(){
return person.firstName + '-' + person.lastName
},
set(value){
//获取到这个属性的最新值
console.log(value);
const nameArr = value.split('-')
person.firstName = nameArr[0]
person.lastName = nameArr[1]
}
})
return {
person
}
}
}
</script>