Vue中计算属性的 setter 和 getter 以及简便书写方式的由来

最新推荐文章于 2024-04-15 20:26:27 发布

Kevin11Yao

最新推荐文章于 2024-04-15 20:26:27 发布

阅读量151

点赞数 1

分类专栏： Vue 文章标签： javascript vue.js es6 html

本文链接：https://blog.csdn.net/weixin_45664402/article/details/114462512

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文探讨了Vue.js中计算属性的简写形式，通过一个实例展示了如何将标准的get和set方法合并为一个属性名，同时解释了这种简写方式下其实质仍然是一个只读属性。在示例中，`fullSentence`计算属性用于拼接`firstName`和`lastName`，并提供了set方法来更新这两个数据属性。

摘要由CSDN通过智能技术生成

<body>
    <div id="app">
        <h2>{{fullSentence}}</h2>
    </div>
    <script src="../JS/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                firstName:'Kobe',
                lastName:'Beyant'
            },
            computed:{
                // fullSentence:function(){
                //     return this.message + ' ' + this.lastName;
                // }
                
                // 以上写法实质上是如下书写的简写形式

                // 一般只需要实现get方法
                // 而没有set方法，是一个 只读属性
                fullSentence:{
                    set:function(newValue){
                        // console.log('------',newValue);
                        const names = newValue.split(' ');
                        this.firstName = names[0];
                        this.lastName = names[1];
                    },
                    get:function(){
                        return this.firstName + ' ' + this.lastName;
                    }
                }

                
            }
        
        })
    </script>
</body>