<script setup lang="ts">
import {ref,computed} from "vue";

let firstName = ref('zhang')
let listName =ref('san')

// 计算属性有缓存
let myName = computed({
  //return firstName.value + listName.value
  get(){
    return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + listName.value
  },
  set(setName){
    const [val1 = '',val2 = ''] = setName.split('-')
    firstName.value = val1
    listName.value = val2
  }
})

function changeName(){
  myName.value = 'li-si'
}

</script>

<template>
  <main class="person">
    姓：<input type="text" v-model:="firstName">
    名：<input type="text" v-model:="listName">
  </main>
  <h1>姓名：{{myName}}</h1>

  <button @click="changeName">改名</button>
</template>

<style scoped>
button {
  margin: 0 1rem;
}
.person {
  font-size: 2rem;
  line-height: 2rem;
  input{
    height: 2rem;

  }
}
</style>
