vue简单实现购物车

<template>
  <div>
    <!-- 购物车 -->
    <table>
      <thead>
        <tr>
          <!-- 把计算属性的值 绑定给全选按钮 -->
          <!-- v-model 绑定的是data中的属性 -->
          <!-- isCheckAll: 计算属性, 实际是个函数,不能用v-model -->
          <!-- 勾选框的值被点击后, 发生变化, 触发 change 事件 -->
          <td>
            <input
              @change="chaChanged"
              type="checkbox"
              :checked="isCheckAll"
            />全选
          </td>
          <td>图片</td>
          <td>名称</td>
          <td>价格</td>
          <td>数量</td>
          <td>小计</td>
        </tr>
      </thead>

      <tbody>
        <tr v-for="(p, i) in products" :key="i">
          <td>
            <input type="checkbox" v-model="p.checked" />
            <span>{{ p.checked }}</span>
          </td>
          <td><img :src="p.img" alt="" /></td>
          <td>{{ p.name }}</td>
          <td>¥{{ p.price }}</td>
          <td>
            <!-- disabled 表单元素的属性, 不可用, 不能交互 -->
            <!-- true生效  false不生效 -->
            <button @click="p.count--" :disabled="p.count == 1">-</button>
            <span>{{ p.count }}</span>
            <button @click="p.count++">+</button>
          </td>
          <td>¥{{ p.price * p.count }}</td>
        </tr>
      </tbody>

      <tfoot>
        <tr>
          <!-- methods中的方法, 使用时需要() -->
          <td colspan="6" align="right">合计: {{ total() }}</td>
        </tr>

        <tr>
          <!-- computed中的方法, 使用时不需要() -->
          <td colspan="6" align="right">合计: {{ total2 }}</td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 名字,价格,数量,是否勾选,图片
      products: [
        {
          img: require('./assets/heros/Annie.jpg'),
          name: '哥特萝莉',
          price: 79,
          count: 1,
          checked: false,
        },
        {
          img: require('./assets/heros/Galio.jpg'),
          name: '幽蓝梦魇 加里奥',
          price: 100,
          count: 1,
          checked: false,
        },
        {
          img: require('./assets/heros/Gwen.jpg'),
          name: '咖啡甜心 格温',
          price: 110,
          count: 1,
          checked: false,
        },
        {
          img: require('./assets/heros/LeeSin.jpg'),
          name: '龙的传人 李青',
          price: 1200,
          count: 1,
          checked: false,
        },
      ],
    }
  },
  methods: {
    // 全选按钮的 状态变化 事件: change
    // 事件触发的, 一定要放在methods里
    chaChanged(e) {
      // 此方法是 勾选框 勾选操作触发的, 如何得到勾选框的 勾选状态?
      // 事件参数
      console.log(e.target.checked) //到后台找 checked 属性在哪
      // 数据中每个商品的 checked 属性, 都应该和全选一样
      this.products.forEach(p => (p.checked = e.target.checked))
    },

    total() {
      // 遍历商品, 计算所有商品价格的总和
      var sum = 0
      // forEach: 在JS高级 数组高阶函数中讲解的
      this.products.forEach(p => (sum += p.price * p.count))
      return sum
    },
  },
  // 配置项:computed 称为计算属性
  // 作用: 存放在这里的函数, 使用时不用(), 会自动触发. 适合没有参数的函数
  computed: {
    // 不带参数的, 判断每一个都是勾选
    isCheckAll() {
      // 每一个元素, 都使用箭头函数判断, 返回真还是假
      return this.products.every(p => p.checked)
    },

    total2() {
      var sum = 0
      // 只累加 勾选状态是 true 的元素
      // 在乘法里, *true 转 *1    *false 转*0
      this.products.forEach(p => {
        sum += p.price * p.count * p.checked
      })
      return sum
    },
  },
}
</script>

<style lang="scss" scoped>
table {
  // 边框合并
  border-collapse: collapse;

  thead {
    background-color: #eee;
  }

  td {
    border: 1px solid gray;
    padding: 5px 15px;

    img {
      width: 100px;
    }
  }
}
</style>

购物车流程

1. 制作假数据, 在 data 中 products, 保存了所有商品
   每个商品包含信息: 名字, 价格, 图片, 数量, 是否勾选
2. 数据的展示
   • 在HTML中, 使用 table 完成头部栏的制作, 然后添加css样式
   • 完成body的制作, 使用 v-for 把实际数据填充到表格里
   • 完成脚部的制作, tfoot
3. 完成 + 和 - 的制作, 小计功能的实现
   • 利用 disabled 属性, 解决 -1 最小为1 的问题
4. 合计的制作
   • 先: 在methods中制作total方法, 计算总和. 使用时需要()来触发
   • 后: 计算属性的引入, 在 computed 中制作方法, 使用时不需要()
5. 单选的制作
   • 引入v-model概念, 双向绑定: 可以在用户操作勾选时, 影响相关的数据, 就是商品的 checked 属性
   • 重新制作 合计功能, 添加 *p.checked , 只计算勾选为真的商品总和
6. 全选按钮的状态 和 单选操作联动
   • 利用数组高阶函数 every 来判断是否每个商品都是勾选的
   • 最终结果绑定给 全选按钮的 checked 属性
   • 考虑方法不需要参数, 所以在计算属性中书写 isCheckAll
7. 全选按钮的事件: change
   • 当全选按钮被点击后, 变更状态, 利用 事件参数 来读取元素的 勾选状态值, 然后设置给每个商品的checked属性. 让他们联动