计算属性（重要）

最新推荐文章于 2023-08-23 10:37:55 发布

Eli-sun

最新推荐文章于 2023-08-23 10:37:55 发布

阅读量467

点赞数

分类专栏： Vuejs 文章标签： vue

本文链接：https://blog.csdn.net/vfjcgg/article/details/106572818

版权

Vuejs 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

什么是计算属性？

我们知道在模板中可以直接通过插值语法显示一些data中的数据。
但是在某些情况下，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示。
1.比如我们有firstName和lastNmae两个变量，我们需要显示完整的名称。
2.但是如果多个地方都需要显示完整的名称，我们就需要写多个{{firstName}}{{lastName}}

我们可以将上面的代码转换成计算属性：
OK，我们发现计算属性是写在实例computed选项中的。

栗子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h2>{{firstName+' '+lastName}}</h2>
        <h2>{{firstName}} {{lastName}}</h2>

        <h2>{{getFullName()}}</h2>
        <h2>{{fullName}}</h2>
    </div>

    <script src="../2020-6-Vuejs/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: '你好！',
                firstName: 'Lebron',
                lastName: 'James',
            },
            //computed:计算属性()
            computed: {
                fullName: function() {
                    return this.firstName + ' ' + this.lastName;
                }
            },
            methods: {
                getFullName: function() {
                    return this.firstName + ' ' + this.lastName;
                }
            }
        })
    </script>

</body>

</html>

计算属性的复杂操作：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h2>总价格：{{totalPrice}}</h2>
    </div>

    <script src="../2020-6-Vuejs/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                books: [{
                        id: 110,
                        name: 'unix编程艺术',
                        price: 119
                    }, {
                        id: 111,
                        name: '代码大全',
                        price: 112
                    }, {
                        id: 112,
                        name: '深入理解计算机原理',
                        price: 199
                    }, {
                        id: 113,
                        name: '现代操作系统',
                        price: 109
                    },

                ]
            },
            computed: {
                totalPrice: function() {
                    let result = 0;
                    for (let i = 0; i < this.books.length; i++) {
                        result += this.books[i].price;
                    }
                    return result;
                }

            }
        })
    </script>
</body>

</html>

Eli-sun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
计算属性（重要）

什么是计算属性？我们知道在模板中可以直接通过插值语法显示一些data中的数据。但是在某些情况下，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示。1.比如我们有firstName和lastNmae两个变量，我们需要显示完整的名称。2.但是如果多个地方都需要显示完整的名称，我们就需要写多个{{firstName}}{{lastName}}我们可以将上面的代码转换成计算属性：OK，我们发现计算属性是写在实例computed选项中的。栗子：<!DOCTYPE htm
复制链接

扫一扫