Services

        <ul>

            <li v-for="(item,index) in arr" @click="item.flag=!item.flag" :class="{lu: item.flag}">
                <span>{{item.name}}</span> <span style="position: absolute;right: 15px;">{{item.age}}</span>
            </li>


        </ul>
        <hr style="width: 320px;margin: 0 auto;">
        <h2>Total <span style="margin-left: 225px;"> {{fn}}</span></h2>
    </div>


</div>


<script src='https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js'></script>
<script>

    new Vue({
        el: '#app',
        data: {
            arr: [{ name: "Web Devenlopment", age: 3000, flag: false }, { name: "Python", age: 1000, flag: false }, { name: "Java", age: 2000, flag: false }, { name: "GO", age: 2200, flag: false }],
        },
        computed: {
            fn() {
                let a = this.arr.filter(i => i.flag)
                console.log(a);
                let num = 0
                for (key in a) {
                    num += a[key].age

                }
                return num

            }
        }



    })
点击计算数字 Vue

Services
