<template>
<div>
姓:<input type="text" v-model="xing"><br>
名:<input type="text" v-model="ming"><br>
姓名:{{ name }}
<button @click="xiuName">lisi</button>
</div>
</template>
<script lang='ts' setup>
import { ref ,computed} from "vue";
let xing=ref('张')
let ming=ref('三')
let name=computed({
get(){
return xing.value.slice(0,1).toUpperCase()+xing.value.slice(1)+'-'+ming.value
},
set(val){
let [str1,str2]=val.split('-')
xing.value=str1
ming.value=str2
}
})
let xiuName=()=>{
name.value='li-si'
}
</script>
<style lang='less' scoped>
</style>