Vue循环实现累加的七种方法

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

〆﹏为你伏笔

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

阅读量5.8k

点赞数 3

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

本文链接：https://blog.csdn.net/Q2159621453/article/details/124932777

版权

vue 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

只是把之前的知识又复习一遍。

<body>
    <div id="app">
        <h2>总价：{{totalPrice}}</h2>
    </div>
    <script>
        const vm = new Vue({
            el: "#app",
            data() {
                return {
                    books: [
                        { id: 110, name: "JavaScript从入门到入土", price: 119 },
                        { id: 111, name: "Java从入门到放弃", price: 80 },
                        { id: 112, name: "编码艺术", price: 99 },
                        { id: 113, name: "代码大全", price: 150 },
                    ]
                }
            },
            //原始方法
            /* computed:{
                totalPrice(){
                    let total = 0;
                    for(let i = 0;i < this.books.length;i++){
                        total += this.books[i].price;
                    }
                    return total;
                }
            } */
            
            //for...in可枚举的
            /* computed:{
                totalPrice(){
                    let total = 0;
                    for(let i in this.books){
                        total += this.books[i].price;
                    }
                    return total;
                }
            } */

            //for...of可迭代的
            /* computed:{
                totalPrice(){
                    let total = 0;
                    for(let item of this.books){
                        total += item.price;
                    }
                    return total;
                }
            } */

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

            //map方法，对数组元素进行操作，返回一个新的数组
            /* computed: {
                totalPrice() {
                    let total = 0;
                    this.books.map(item => {
                        total += item.price;
                    })
                    return total;
                }
            } */
            
            //对数组元素进行筛选，返回一个新的数组
            /* computed:{
                totalPrice(){
                    let total = 0;
                    this.books.filter(item=>{
                        total+=item.price;
                    })
                    return total;
                }
            } */

            //total初始值，没有初始值就是数组的第一个元素，item现在项，累加器。
            computed: {
                totalPrice() {
                    return this.books.reduce((total, item) => {
                        return  total + item.price
                    }, 0)
                }
            }
        })
    </script>
</body>

〆﹏为你伏笔

关注

3
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
Vue循环实现累加的七种方法

只是把之前的知识又复习一遍。<body> <div id="app"> <h2>总价：{{totalPrice}}</h2> </div> <script> const vm = new Vue({ el: "#app", data() { return {
复制链接

扫一扫