vue学习十

<div id="app10">
        <ul>
            <li style="list-style-type: none;" v-for="(item , index) in list" :key="list.id">
                {{ item.num }}
            </li>
        </ul>
        computed合计:{{ count }}
        computed合计:{{ count }}
        computed合计:{{ count }}
        <br>
        methods合计:{{ this.counts() }}
        methods合计:{{ this.counts() }}
        methods合计:{{ this.counts() }}
    </div>
    <script>
        const app10=new Vue({
            el:'#app10',
            data:{
                list:[
                    {id:1,num:2},
                    {id:2,num:2},
                    {id:3,num:2}
                ]
            },
            computed:{
                count(){
                    console.log("computed运行一次")
                    let num=this.list.reduce((sum,item) => sum+item.num,0)
                    return num
                }
            },
            methods:{
                counts(){
                    console.log("methods运行一次")
                    let temp=0
                    for(let i=0;i<this.list.length;i++){
                        temp=temp+this.list[i].num
                    }      
                    return temp
                }
            }
        })
    </script>