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 关键字

最终结果：