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

是非成败转头空 青山依旧在 几度夕阳红 。。。
  博客园  :: 首页  :: 管理

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

Posted on 2024-02-22 08:32  且行且思  阅读(889)  评论(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));
    };