没有描述 只是记录自己的学习笔记
<template>
<!-- vue3 外部的div可以不要 直接去写 -->
<div>
姓:
<input type="text" v-mode="person.firstName" />
名:
<input type="text" v-mode="person.lastName" />
<br />
<span>全名:{{fullname}}</span>
</div>
</template>
<script>
// vue3 声明基本类型用ref 引用类型用reactive
// 引入vue3的计算属性computed
import { reactive, computed } from "vue";
export default {
// vue2的计算属性
// computed: {
// fullname() {
// return this.person.firstName + "-" + this.person.lastName;
// }
// },
setup() {
let person = reactive({
firstName: "张",
lastName: "三"
});
// 计算属性 因为是reactive声明的 可以往里面任意追加属性
// 简写形式 没有考虑计算属性被修改的情况
// person.fullName = computed(() => {
// return person.firstName + "-" + person.lastName;
// });
// 完整写法 考虑读和写
person.fullName = computed({
get() {
return person.firstName + "-" + person.lastName;
},
set(value) {
let newArr = value.split("-");
person.firstName = newArr[0];
person.lastName = newArr[1];
}
});
return {
person
};
}
};
</script>