Vue3【十二】09Computed计算属性

计算属性获取全名这种方式是只读的不能修改
这样定义fullName是一个计算属性，可读可写

案例截图

computed计算属性

目录结构

在这里插入图片描述

代码

Person.vue

<template><div class="person"><h1>我是 Person 组件</h1>姓： <input type="text" v-model="firstName">名： <input type="text" v-model="lastName">全名：<span>{{ firstName }} - {{ lastName }}</span>全名：<span>{{ fullName }}</span><button @click="changeFullName">修改全名</button></div>
</template><script lang="ts" setup>
import { ref, computed } from 'vue';let firstName = ref('张');
let lastName = ref('国老');// 计算属性 获取全名 这种方式是只读的不能修改
// let fullName = computed(() => {
//     return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + ' - ' + lastName.value;
// });// 这样定义fullName是一个计算属性，可读可写
let fullName = computed({get: () => {return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + ' - ' + lastName.value;},set: (val) => {[firstName.value, lastName.value] = val.split('-');console.log('修改全名',val);}
});function changeFullName() {fullName.value = '曹-国舅'
}</script><style scoped>
.person {background-color: #ff9e4f;box-shadow: 0 0 10px;border-radius: 30px;padding: 30px;
}button {margin: 0 10px;padding: 0 5px;box-shadow: 0 0 5px;;
}
</style>