Vue 用filter和reduce 完成奇数和的相加

339 阅读1分钟
<div id="app">
    <div v-for='item in get(arr)'>//循环get方法 并把每一项item展示出来 item是这个方法里的每一项的数值 get(arr) get是定义的方法 arr是传进去的形参
     //出来的是这个方法里得到的值 也就是add这个方法的值    {{item}} 
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data() {
            return {
                arr: [11, 22, 33, 44, 55]
            }
        },
        methods: {
            get(arr) {
                let res = this.arr.filter(item => item % 2 !=
                    0) //this指向arr数组 通过过滤器的方法 通过条件得出余不为0既是奇数 并把结果返回给res  item为arr里的每一项的数值
                console.log(res); //打印查看结果是否正确 
                let add = res.reduce((a, b) => a += b) //指向上一个res数组  把通过筛选的奇数相加   total,curr为形参 可以随意更改  total为数组里的第一个元素 curr是第二个依次类推  总而言之就是计算数组的相加之后的总和
                console.log(add); //打印查看结果是否正确 
                return {
                    add
                } //必须把得到的结果返回出去 
            }
        },
    })
    
    
</script>