Vue——02-02计算属性的复杂使用以及七种求和方法

最新推荐文章于 2024-04-09 09:06:37 发布

Southern Wind

最新推荐文章于 2024-04-09 09:06:37 发布

阅读量1.4k

点赞数 1

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

本文链接：https://blog.csdn.net/nanchen_J/article/details/120438172

版权

Vue 专栏收录该内容

44 篇文章 11 订阅

订阅专栏

上一章讲述了计算属性的基本使用，这里说一下复杂使用

怎么使用计算属性computed：计算出所有books的总价格Price。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>计算属性的复杂使用</title>
</head>
<body>
    <div id="app">
        <h2>总价格：{{totalPrice}}</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                books: [
                    { id: 110, name: "JavaScript从入门到入土", price: 119 },
                    { id: 111, name: "Java从入门到放弃", price: 80 },
                    { id: 112, name: "编码艺术", price: 99 },
                    { id: 113, name: "代码大全", price: 150 },
                ]
            },
        })
    </script>
</body>
</html>

首先写入

 computed: {
    totalPrice:function() {
    //写出七种方法
}
}

一共有七种求和方法：

第一种：利用for循环遍历

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

第二种：forEach

totalPrice: function () {
                     let total = 0;
                     this.books.forEach((item) => {
                         total += item.price
                     })
                     return total;
                 }

第三种：for in

totalPrice: function () {
                    let total = 0;
                    for (let i in this.books){
                        total += this.books[i].price
                    }
                    return total;
                }

第四种：for of

totalPrice: function () {
                    let total = 0;
                    for(let value of this.books){
                        total += value.price
                    }
                    return total
                }

第五种：map

totalPrice: function () {
                    this.books.map((item)=>{
                        total += item.price
                    })
                    return total;
                }

第六种：filter

totalPrice: function () {
                    let total = 0;
                    this.books.filter((item)=>{
                        console.log(item);
                        total += item.price
                    })
                    return total;
                }

第七种：reduce

totalPrice: function () {       
                    return this.books.reduce((currentTotal,item)=>{
                        console.log(item);
                        return currentTotal + item.price
                    },0)
                }

简写：

totalPrice: function () {       
                    return this.books.reduce((currentTotal,item)=>+item.price)
                }

下面是完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>计算属性的复杂使用</title>
</head>
<body>
    <div id="app">
        <h2>总价格：{{totalPrice}}</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                books: [
                    { id: 110, name: "JavaScript从入门到入土", price: 119 },
                    { id: 111, name: "Java从入门到放弃", price: 80 },
                    { id: 112, name: "编码艺术", price: 99 },
                    { id: 113, name: "代码大全", price: 150 },
                ]
            },
            computed: {
                //1、 for循环第一种方法
                 totalPrice:function() {
                     let total = 0;
                     for(let i = 0; i<this.books.length;i++){
                         total += this.books[i].price;
                     }
                     return total;
                 }
 
                //2、 forEach
                /*  totalPrice: function () {
                     let total = 0;
                     this.books.forEach((item) => {
                         total += item.price
                     })
                     return total;
                 } */
                //3、 for in
               /*  totalPrice: function () {
                    let total = 0;
                    for (let i in this.books){
                        total += this.books[i].price
                    }
                    return total;
                } */
                //4、 for of
                /* totalPrice: function () {
                    let total = 0;
                    for(let value of this.books){
                        total += value.price
                    }
                    return total
                } */
                //5、 map
                /* totalPrice: function () {
                    this.books.map((item)=>{
                        total += item.price
                    })
                    return total;
                } */
                //6、 filter
                /* totalPrice: function () {
                    let total = 0;
                    this.books.filter((item)=>{
                        console.log(item);
                        total += item.price
                    })
                    return total;
                } */
                //7、 reduce
               /*  totalPrice: function () {       
                    return this.books.reduce((currentTotal,item)=>{
                        console.log(item);
                        return currentTotal + item.price
                    },0)
                } */
               /*  totalPrice: function () {       
                    return this.books.reduce((currentTotal,item)=>+item.price)
                } */
            }
        })
    </script>
</body>
</html>

输出的price总和应为：448

Southern Wind

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue——02-02计算属性的复杂使用以及七种求和方法

上一章讲述了计算属性的基本使用，这里说一下复杂使用怎么使用计算属性computed：计算出所有books的总价格Price。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht
复制链接

扫一扫