Vue.js的计算属性：computed的魔法_vue 列表计算-CSDN博客

本文链接：https://blog.csdn.net/weixin_42554191/article/details/146308708

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

引言

Vue.js是一个流行的前端JavaScript框架，它提供了一种简单而强大的方式来构建用户界面和单页应用。Vue.js的核心库专注于视图层，使得它非常易于学习和使用，同时也与其他库或现有项目集成得非常顺畅。在Vue.js中，计算属性（computed properties）是组件的重要组成部分，它们根据组件的数据自动计算新的值，并在数据变化时自动更新。本文将探讨计算属性的使用方法和优势，并通过有趣的示例展示其强大的功能。

计算属性的基本概念

在Vue.js中，计算属性是组件的方法，它们根据组件的数据自动计算新的值，并在数据变化时自动更新。计算属性被定义在组件的computed选项中。

计算属性的基本语法

计算属性的基本语法如下：

new Vue({
    el: '#app',
    data: {
        firstName: 'Alice',
        lastName: 'Smith'
    },
    computed: {
        fullName: function() {
            return this.firstName + ' ' + this.lastName;
        }
    }
});

在上述代码中，fullName是一个计算属性，它根据firstName和lastName数据计算新的值。

计算属性的优势

使用计算属性有以下几个显著的优势：

简化代码：计算属性使得根据数据计算新的值变得更加简单和直观。
提升可读性：计算属性使得模板中的计算逻辑一目了然，提升了代码的可读性。
增强灵活性：计算属性可以轻松处理复杂的计算逻辑，提供了极大的灵活性。

计算属性的应用场景

计算属性在许多场景下都非常有用，下面通过一些有趣的示例来展示其应用。

1. 计算全名

计算属性可以用于计算全名。

<div id="app">
    <p>{{ fullName }}</p>
</div>

<script>
new Vue({
    el: '#app',
    data: {
        firstName: 'Alice',
        lastName: 'Smith'
    },
    computed: {
        fullName: function() {
            return this.firstName + ' ' + this.lastName;
        }
    }
});
</script>

2. 计算列表的总和

计算属性可以用于计算列表的总和。

<div id="app">
    <p>{{ total }}</p>
</div>

<script>
new Vue({
    el: '#app',
    data: {
        numbers: [1, 2, 3, 4, 5]
    },
    computed: {
        total: function() {
            return this.numbers.reduce((sum, number) => sum + number, 0);
        }
    }
});
</script>

3. 计算对象的属性

计算属性可以用于计算对象的属性。

<div id="app">
    <p>{{ user.name }}</p>
    <p>{{ user.age }}</p>
</div>

<script>
new Vue({
    el: '#app',
    data: {
        user: {
            firstName: 'Alice',
            lastName: 'Smith',
            age: 30
        }
    },
    computed: {
        user: function() {
            return {
                name: this.user.firstName + ' ' + this.user.lastName,
                age: this.user.age
            };
        }
    }
});
</script>