计算属性

最新推荐文章于 2022-08-23 18:04:31 发布

UltimateGalaxy

最新推荐文章于 2022-08-23 18:04:31 发布

阅读量301

点赞数

分类专栏：前端技术文章标签： vue.js

本文链接：https://blog.csdn.net/qq_43618583/article/details/113058199

版权

前端技术专栏收录该内容

21 篇文章 0 订阅

订阅专栏

VUE–计算属性

一、什么是计算属性
例：我们这里想输入一个人的姓氏和名字，不使用计算属性的时候，我需要这样做：

	<body>
        <div id="app">
            <h2>{{firstname}}  {{lastname}}</h2>    
        </div>
    </body>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                firstname:'Joe',
                lastname:'Biden'
            }
        })
    </script>

显示在网页上：
在这里插入图片描述

若要很多地方显示姓名时，则需要写多个{{firstname}} {{lastname}}。这样会很不方便。
这时我们可以引入计算属性—computed：{}，利用计算属性，我们可以这样做：

	<body>
        <div id="app">
            <!--message为变量-->
            <h2>{{firstname}}  {{lastname}}</h2>    
            <h2>{{fullname}}</h2>
        </div>
    </body>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                firstname:'Joe',
                lastname:'Biden'
            },
            computed:{
                fullname：function(){
                    return this.firstname + ' ' + this.lastname
                }
            }
        })
    </script>

显示在网页上：
在这里插入图片描述

我们将computed中的fullname当成一个属性来看待，而不是一个函数，所以在body中调用它的时候，可以不用加（）；
我们发现，使用计算属性时，大大简洁了代码。
二、计算属性的复杂操作
例：汇总书的总价并显示。

<body>
        <div id="app">
            <h2>总价格：{{totalPrice}}</h2>        
        </div>
    </body>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                books:[
                    {id:1, name:'harry potter', price:50},
                    {id:2, name:'送你一颗子弹', price:30},
                    {id:3, name:'闪闪发光的人生', price:55}
                ]
            },
            computed:{
                totalPrice:function(){
                    var result = 0
                    for(var i = 0; i < this.books.length; i++){
                        result += this.books[i].price
                    }
                    return result
                }
            }
        })
    </script>