购物车

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第13天，点击查看活动详情

一。页面布局

             <table>
    <thead>
      <tr>
        <th>
          全选
          <input type="checkbox" v-model="checkAll" />
        </th>
        <th>名称</th>
        <th>图片</th>
        <th>单价</th>
        <th>数量</th>
        <th>小计</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item,index) in goodses" :key="item.id">
        <td>
          <input type="checkbox" v-model="item.state" />
        </td>
        <td>{{item.name}}</td>
        <td>
          <img :src="item.img" alt="" />
        </td>
        <td>{{item.price | jiage}}</td>
        <td>

min设置计数器允许的最小值 , max设置计数器允许的最大值

@change绑定值被改变时触发, $event事件返回值

          <el-input-number
            v-model="item.count"
            :min="1"
            :max="10"
            @change="item.count=$event"
          ></el-input-number>
        </td>
        <td>{{item.price*item.count | jiage}}</td>
        <td>

删除按钮（ @confirm 点击确认按钮触发事件）

          <el-popconfirm title="你确定删除吗" @confirm="del(index)">
            <el-button slot="reference">删除</el-button>
          </el-popconfirm>
        </td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="7">总价:{{zongjia | jiage}}</td>
      </tr>
    </tfoot>
  </table>
  

二。Vue

        new Vue({
    el: ".root",
    data: {
    //goodses数据
      goodses: [
        {
          id: 1,
          name: "ipad2020",
          img: "https://img13.360buyimg.com/n7/jfs/t1/63049/17/17124/123885/614119adE99ef6daf/498f41cd75a643d5.jpg",
          price: 3000,
          count: 1,
          state: false,
        },
        {
          id: 2,
          name: "苹果手机",
          img: "https://img10.360buyimg.com/n7/jfs/t1/216578/34/14150/121785/62286978E1a6f4ef0/b6b32191c26d161b.jpg",
          price: 3000,
          count: 2,
          state: true,
        },
        {
          id: 3,
          name: "Redmi ",
          img: "https://img14.360buyimg.com/n7/jfs/t1/206463/36/24196/240230/62c242d7Ecfdf0c95/d884aa361b023132.jpg",
          price: 649,
          count: 3,
          state: false,
        },
        {
          id: 4,
          name: "苹果手机",
          img: "https://img13.360buyimg.com/n7/jfs/t1/131895/35/15668/114276/5facca78E64ee648d/8a6836a4352097c6.jpg",
          price: 798,
          count: 4,
          state: true,
        },
        {
          id: 5,
          name: "荣耀X30",
          img: "https://img13.360buyimg.com/n7/jfs/t1/219583/26/7800/151098/61b8a3f2E2879c4f6/9b73c1d24e0abecb.jpg",
          price: 3000,
          count: 5,
          state: false,
        },
      ],
    },
    methods: {

删除按钮(删除按钮所在下标在goodses数组里对应下标的内容)

      del(index) {
       this.goodses.splice(index, 1);
      },
    },

过滤器

    filters: {
      jiage(val) {
        return `￥${val.toFixed(2)}`;
      },
    },

    // 计算属性
    computed: {

总价：①。filter返回goodses数组里状态为true的内容

②。map将状态为true的数据里的r.count * r.price

③。reduce将map之后的数据计算总和

      zongjia() {
        return this.goodses
          .filter((r) => r.state == true)
          .map((r) => r.count * r.price)
          .reduce((a, b) => a + b, 0);
      },

全选按钮

①。get()当goodses数组里的所有r.state == true的时候返回true

②。set()当全选按钮状态为true的时候，数组里每一个状态都为true

 checkAll: {
        get() {
          return this.goodses.every((r) => r.state == true);
          //   console.log(a);
        },
        set(val) {
          this.goodses.forEach((r) => {
            r.state = val;
          });
        },
      },
    },
  });