明天的明天 永远的永远 未知的一切 我与你一起承担 ??

是非成败转头空 青山依旧在 几度夕阳红 。。。
随笔 - 1277, 文章 - 0, 评论 - 214, 阅读 - 320万
  博客园  :: 首页  :: 管理
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

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

Posted on   且行且思  阅读(742)  评论(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>
复制代码

 

 

复制代码
//js代码
<script>
    export default {
        components: {},
        props: [],
        data() {
            return {
                "amount": 1000,//模拟数据总金额
                "form": {
                    "items": []
                }
            }
        },
        computed: {},
        watch: {},
        created() {},
        beforeMount() {},
        mounted() {
            let list = [{//模拟数据源
                name: "和平区",
                index: 0,
                fund: 0,
                scale: 0
            }, {
                name: "沈河区",
                index: 1,
                fund: 0,
                scale: 0
            }]
            this.form.items = list
        },
        destroyed() {},
        methods: {
            commit() {
                //提交表单时 通过reduce函数计算各个区县的总金额  以及实现后续校验
                let total = this.form.items.reduce((sum, item) => sum + Number(item.fund || 0), 0);
                console.log(total)
            },
            //通过填入金额计算比例
            applyScale(index, fund) {
                this.form.items[index].scale = (fund / this.amount * 100).toFixed(2)
            },
        },
        config: {}
    }
</script>
复制代码

 

复制代码
const QualityData = ref([]);
    const QualitySum1 = ref();
    const QualitySum2 = ref();
    const get_QualityManagement = async () => {
        const param = {
            year: year,
        };
        const _data = await getQualityManagement(param);
        const {
            data
        } = _data;
        QualityData.value = data;
        QualitySum1.value = data.special.reduce((total, num) => {
            return total + num
        });
        QualitySum2.value = data.aclass.reduce((total, num) => {
            return total + num
        });
        //console.log('QualitySum1>>>' + JSON.stringify(QualitySum1));
    };
复制代码

 

相关博文：
· Vue2/3 实现动态循环的select下拉框去重功能：
· Vue3+antd实现分页功能
· Vue基础5个实用案例
· Vue-购物车简单案例
· Vue购物车一些参考，插槽传值，循环改对象值 收集表单 main.js
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
历史上的今天：
2008-02-22 AJAX 12030错误
点击右上角即可分享
微信分享提示
AI IDE Trae