W260426/16.vue3/project1/src/components/Demo6.vue

<template>
  <div>
    <h1>Demo6:Computed</h1>
    <p>姓: <input type="text" v-model="firstName" /></p>
    <p>名: <input type="text" v-model="lastName" /></p>
    <p>全名:{{ fullName }}</p>
    <button @click="handleClick">修改全名</button>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from "vue";
let firstName = ref("孙");
let lastName = ref("悟空");
// let fullName = computed(() => {
//   return firstName.value + lastName.value;
// });
let fullName = computed({
  get() {
    return firstName.value + lastName.value;
  },
  set(val) {
    let arr = val.split("-");
    firstName.value = arr[0];
    lastName.value = arr[1];
  },
});
const handleClick = () => {
  fullName.value = "hu-tutu";
};
</script>

<style lang="scss" scoped>
</style>