[Vue]-计算属性

本文基于: 尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通_哔哩哔哩_bilibili

需求

设置两个输入框，一个负责输入 FirstName， 另一个负责 LastName， 在下方设置一个用于展示 FullName 的标签。

传统 methods 实现

<div id="root">
        FirstName：<input type="text" v-model="firstName"> <br/><br/>
        LastName：<input type="text" v-model="lastName"> <br/><br/>
        FullName：<span>{{fullName()}}</span>
</div>

Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
        el:'#root',
        data:{
                firstName:'张',
                lastName:'三'
        },
        methods: {
                fullName(){
                        console.log('@---fullName')
                        return this.firstName + '-' + this.lastName
                }
        },
})

通过 v-model 实现对 FirstName 和 LastName 的双向绑定加以 fullName 函数的方式实现功能，步骤相对繁琐且性能不高， Vue 为我们提供了 计算属性 这一更加简便的方法。

计算属性 实现

所谓 计算属性 就是将已定义的属性进行 加工 、计算 后生成的全新的属性。

<div id="root">
    FirstName：<input type="text" v-model="firstName"> <br/><br/>
    LastName：<input type="text" v-model="lastName"> <br/><br/>
    FullName：<span>{{fullName}}</span> <br/><br/>
</div>

Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
const vm = new Vue({
    el:'#root',
    data:{
            firstName:'张',
            lastName:'三',
    },
    computed:{
            fullName:{
                    //fullName 被访问时调用 get
                    get(){
                            console.log('@---get---')
                            return this.firstName + '-' + this.lastName
                    },
                    //fullName 被修改时调用 set
                    set(value){
                            console.log('set',value)
                            const arr = value.split('-')
                            this.firstName = arr[0]
                            this.lastName = arr[1]
                    }
            }
    }
})

由于我们的页面只有两个输入框用以输入 FirstName 和 LastName ，在不使用 f12 开发者控制台 的情况下是无法直接修改 FullName 的，所以 fullName 内的 set() 函数可以省略不写。 set() 的作用是：在修改 fullName 属性时 firstName 和 lastName 也会同步改变。

实现效果

计算属性 的简写

fullName(){
    console.log('@---get---')
    return this.firstName + '-' + this.lastName
}

本小节课程源码: vue_basic/08_计算属性 · Hu_Soking/vue-sgg - 码云 - 开源中国 (gitee.com)