<template>
<div>
<h1>计算属性</h1>
<hr>
<input type="text" v-model="person.firstName"> <br>
<input type="text" v-model="person.lastName"> <br>
<input type="text" v-model="person.fullName">
</div>
</template>
<script>
import { reactive } from "@vue/reactivity";
import { computed } from "@vue/runtime-core";
export default {
name: "Vue3Study05Setup",
setup() {
let person = reactive({
firstName: "张",
lastName: "三",
});
// 计算属性--简写(计算属性返回的值修改无效=>不是单向响应)
// person.fullName = computed(()=>{
// return person.firstName + '-' + person.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>
<style lang="scss" scoped>
</style>
vue3的计算属性
最新推荐文章于 2024-07-18 11:17:10 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)