vue3中的computed计算属性

不想再EM0了

已于 2024-03-31 19:23:22 修改

阅读量124

点赞数 1

文章标签： vue.js javascript 前端

于 2024-03-31 19:09:07 首次发布

本文链接：https://blog.csdn.net/weixin_73098736/article/details/137206698

版权

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