前端学习-vue视频学习005-计算属性computed

尚硅谷视频链接

计算属性：算出一个ref定义的响应式数据

定义只读的计算属性

let fullName = computed(()=>{
    return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
})

定义可读可写的计算属性

let fullName = computed({
    get(){
        return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
    },
    set(val){
        let [str1,str2] = val.split('-')
        firstName.value = str1
        lastName.value = str2
    }
})

整体代码

<template>
    <div class="person">
        <!-- v-model:双向绑定，使得修改文本框内容时，同时也修改原数据 -->
        <!-- 如果使用v-bind,为单向绑定，修改文本框内容时，不会修改原数据 -->
        姓：<input type="text" v-model="firstName"> <br> 
        名：<input type="text" v-model="lastName"> <br>
        全名：<span>{{ fullName }}</span>
        <button @click="changeName">changeName</button>
    </div>
</template>

<script lang="ts" setup name="Person">
    import {ref,computed} from 'vue'
    let firstName = ref('zhang')
    let lastName = ref('san')
    // fullName是一个计算属性；也是ref；此处定义的计算属性只读
    // let fullName = computed(()=>{
    //     return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
    // })

    // 此处定义的计算属性可读可写
    let fullName = computed({
        get(){
            return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
        },
        set(val){
            let [str1,str2] = val.split('-')
            firstName.value = str1
            lastName.value = str2
        }
    })
    // 如果要修改计算属性的数据，用.value修改即可；如果要修改页面展示，需要新增方法，将计算属性的几个组成数据进行修改，从而实现修改页面
    function changeName() {
        fullName.value = 'li-si'
    }

</script>

<style scoped>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    
    button {
        margin : 0 5px;
    }

    li {
        font-size : 20px;
    }
</style>