Vue实现购物车功能完整版(附带详细代码含讲解!!!)

<template>
  <div>
    <table>
      <thead>
        <tr>
          <td>
            <label>
              <!-- checked: 用于设定勾选状态 -->
              <input @change="checkAll" type="checkbox" :checked="isCheckAll" />
              全选
            </label>
          </td>
          <td>序号</td>
          <td>商品名</td>
          <td>单价</td>
          <td>数量</td>
          <td>小计</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(food, i) in foods" :key="i">
          <td>
            <!-- 推荐单标签闭合, 以前版本会报错如果不闭合 -->
            <input type="checkbox" v-model="food.checked" />
            {
   
   {food.checked}}
          </td>
          <td>{
   
   { i+1 }}</td>
          <td>{
   
   { food.name }}</td>
          <td>¥{
   
   { food.price }}</td>
          <td>
            <button @click="food.count--" :disabled='food.count==1'>-</button>
            <span>{
   
   { food.count }}</span>
            <button @click="food.count++">+</button>
          </td>
          <td>¥{
   
   { food.price * food.count }}</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="6">总价格: ¥{
   
   { getTotal }}</td>
          <!-- vue的自动化特色: 只要数据有变化, 相关的所有DOM元素都会刷新 -->
        </tr>
      </tfoot>
    </table>
  </div>
</template>

<script>
  export default {
    // 事件触发的方法: methods
    methods: {
      // 如果事件在调用时, 没写(), 则默认的参数1 是事件参数
      checkAll(e) {
        console.log(e.target.checked); // 查看 checked 属性
        // 读取全选框的值, 赋值给每个商品的checked属性
        this.foods.forEach(
          food => (food.checked = e.target.checked)
        )
      },
    },

    computed: {
      // 判断是否全选: 每一个的checked都是true
      isCheckAll() {
        return this.foods.every(food => food.checked)
      },

      getTotal() {
        // reduce: 让数组元素合并出一个值
        return this.foods.reduce((sum, food) => {
          const {price, count, checked} = food
          // *true 相当于*1
          // *false 相当于 *0 = 0
          // 没有勾选, 就是 sum + 0, 即不累加
          return sum + price * count * checked
        },0)
      }
    },

    data() {
      return {
        foods: [
          {name: '茶碗蒸蛋', price: 9, count: 1, checked: true},
          {name: '小笼包', price: 12, count: 4, checked: false},
          {name: '豆腐脑', price: 6, count: 10, checked: true},
          {name: '豆浆', price: 4, count: 1, checked: false},
          {name: '油条', price: 2, count: 7, checked: true},
        ]
      }
    },
  }
</script>

<style lang="scss" scoped>
table{
  border-collapse: collapse;
  thead{
    background-color: #eee;
  }
  td{
    border: 1px solid gray;
    padding: 10px 20px;

    span{
      display: inline-block;
      width: 30px;
      text-align: center;
    }
  }
}
</style>