vue3中computed的用法

computed的用法"/>

vue3中computed的用法

 一、完整代码

<template><div class="about"><h1>Computed的用法</h1><h3>姓:{{ person.firstName }}</h3><input type="text" v-model="person.firstName"><h3>名:{{ person.lastName }}</h3><input type="text" v-model="person.lastName"><div v-if="person.fullName"><h3>全名:{{ person.fullName }}</h3><input type="text" v-model="person.fullName"></div></div>
</template><script>
import { reactive, computed } from 'vue';export default {name:'aboutPage',setup() {let person = reactive({firstName: '张',lastName: '三'})person.fullName = computed({get() {return person.firstName + '-' + person.lastName},set(value) {const nameArr = value.split('-')person.firstName = nameArr[0]person.lastName = nameArr[1]}})return {person}}
}
</script>

二、主要代码

get：访问了这个属性

set：修改这个属性时操作的业务逻辑

person.fullName = computed({get() {return person.firstName + '-' + person.lastName},set(value) {const nameArr = value.split('-')person.firstName = nameArr[0]person.lastName = nameArr[1]}
})

三、效果