Vue前端computed通过计算属性、指令等实现简单的购物车项目

	 <div>
          <span>求下列商品总价格为所少</span>
          <ul>
            <li v-for="item in list" :key="item.id" :style="{display:mol}">
              id: <td>{{ item.id }}</td>---
              名称: <td>{{ item.name }}</td>--- 
              价格: <td>{{ item.price }}</td>---
              数量: <td>{{ item.count }}</td>
            </li>
            <span>总价格为：${{ addPrice }}</span>
          </ul>
        </div>

 data() {
    return {
      mol:'flex',
      list:[
        {id:1,name:'帽子',price:168,count:1},
        {id:2,name:'衣服',price:238,count:1},
        {id:3,name:'裤子',price:98,count:1}
      ],
    }
  },              // 小知识点: NaN ，即非数值（Not a Number）是一个特殊的数值，这个数值用于表示一个本来要返回数值的操作数未返回数值的情况（这样就不会抛出错误了）。例如，在其他编程语言中，任何数值除以 0 都会导致错误，从而停止代码执行。但在 ECMAScript 中，任何数值除以 0会返回 NaN ，因此不会影响其他代码的执行。
  computed:{      // 计算属性计算的时候需要注意的是：  必须是数字而不是字符串,我当时的错误就是:data里面的price:'$168'里面字符串并且带符号$ ,结果返回的是NaN,这是错误的做法;正确改为price:168才对
    addPrice(){
      var addTotal = 0
      var len = this.list.length;
      for(var i = 0; i < len; i++){
        addTotal += this.list[i].price * this.list[i].count;
      }
      return addTotal;
    }
  },