用computed计算属性实现简易购物车价格总和

computed计算属性会依赖于使用它的data属性，只要是依赖的data属性值有变动，则自定义重新调用计算属性执行一次。

computed计算属性的值是直接从缓存中获取，而不是重新编译执行一次，因而其性能要高一些，尤其是在data属性中的值无变化

页面显示结果

产品数量可以增加，也可以减少，最低到0，总价格随着数量变动也会随之变动求和

代码如下

 <div id="app">
       
         <table v-if='message.length'>
             <thead>
                 <tr>
                     <th>商品名</th>
                     <th>价格</th>
                     <th>数量</th>
                     <th>产地</th>
                     <th>移除</th>
                 </tr>
             </thead>
             <tbody>
                 <tr v-for="(item,index) in message">
                     <td>{{item.name}}</td>
                     <td>{{item.price}}</td>
                     <td><button @click='minues(index)'>-</button>{{item.num}}<button @click='add(index)'>+</button></td>
                     <td>{{item.city}}</td>
                     <td><button @click="remove(index)">删除</button></td>
                 </tr>
             </tbody>
             <tfoot>
                 <tr>
                     <td> 总价格: {{sumPrice}}</td>
                   
                 </tr>
                
             </tfoot>
         </table>
         <div v-else>
            暂时没有商品
        </div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                 message : [
                     {
                         name : "苹果",
                         price : 28,
                         num : 1 , 
                         city : "烟台"
                     },
                     {
                         name : "香蕉",
                         price : 30,
                         num : 1 , 
                         city : "泰国"
                     },
                     {
                         name : "啥果",
                         price : 21,
                         num : 1 , 
                         city : "西江"
                     },
                     {
                         name : "西瓜",
                         price : 22,
                         num : 1 , 
                         city : "烟台"
                     },
                     {
                         name : "梨",
                         price : 23,
                         num : 1 , 
                         city : "三亚"
                     }

                 ]
            },
            methods: {
                //数量减
                minues(i){
                    this.message[i].num > 0 && this.message[i].num--   //数量大于0才可以减
                },
                //数量加
                add(i){
                    this.message[i].num < 10 && this.message[i].num++
                },
                //数据移除
                remove(i){
                    this.message.splice(i,1)
                }
            },
            //computed 计算属性
            computed: {
              sumPrice(){
                return this.message.reduce((a,b)=>{
                //a代表上一次结果    b当前结果  0代表默认值，第一次没有值默认为0
                     console.log(a,b)
                     return a + (b.price * b.num)
                 },0)
              }
            }
        })
    </script>

这样写就简单了