vue計算商品總價格

<div id="gp2">
    <p>總價格：{{zongjiage}}</p>
</div>

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

<script>

    var gp2 = new Vue({
        el:'#gp2',
        data:{
            books:[
                {id:60,name:'可樂',price:961},
                {id:61,name:'雪碧',price:561},
                {id:62,name:'果粒橙',price:102},
                {id:63,name:'加多寶',price:843},
                {id:64,name:'王老吉',price:357}
            ]
        },
        computed:{
            zongjiage:function () {
                let result = 0
                for(let i=0;i<this.books.length;i++){
                    result +=this.books[i].price
                }
                return result
            }
        }
    })

es6新增let命令，用來聲明變量。它的用法類似於var，但是所聲明的變量，只在let命令所在的代碼塊內有效。

詳情請看Vue中 let 關鍵字

最終結果：