Bootstrap

vue3中的computed计算属性

<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>

;