vue-13-购物车案例改造-计算属性-复习

亭_台楼阁

于 2024-05-28 11:20:32 发布

阅读量151

点赞数 1

分类专栏： vue专栏笔记文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_69378630/article/details/139261590

版权

vue专栏笔记专栏收录该内容

25 篇文章 0 订阅

订阅专栏

计算属性可读可写，但是在大部分情况下作为只读

 <div id="box">
    <ul>

      <li>
        <div>
          <input type="checkbox" v-model="isAllChecked">
          <span>全选/全不选</span>
        </div>
      </li>

      <!-- 由于v-if与v-for不推荐放在一起，所以可使用template标签，其作用是隔开两者，同时没有副作用 -->
      <template v-if="datalist.length">
        <li v-for="(item,index ) in datalist" :key="item.id">

          <div>
            <input type="checkbox" v-model="checkList" :value="item">
          </div>

          <div>
            <img :src="item.poster" alt="">
          </div>

          <div>
            <div>{{item.title}}</div>
            <div style="color: red;">价格：{{item.price}}</div>
          </div>

          <div>
            <button @click="item.number--" :disabled="item.number===1">-</button>
            {{item.number}}
            <button @click="item.number++" :disabled="item.number===item.limit">+</button>
          </div>

          <div>
            <button @click="handleDel(index,item.id)">删除</button>
          </div>

        </li>

        <li>
          <div>总金额：{{sum}}</div>
        </li>
      </template>

      <li v-else>
        <div>购物车空空如也</div>
      </li>

    </ul>

 var obj = {
      data() {
        return {
          // 勾选的商品列表
          checkList: [],

          datalist: [{
            id: 1,
            title: "商品1",
            price: 10,
            number: 1,
            poster:
              "https://p0.meituan.net/movie/dc2fed6001e809e4553f90cc6fad9a59245170.jpg@1l_1e_1c_128w_180h",
            limit: 5,
          },
          //省略...
          ]
        }
      },
      methods: {

        // 删除按钮
        handleDel(index, id) {
          console.log(index);
          this.datalist.splice(index, 1)
          // 同步更新checkList
          this.checkList = this.checkList.filter((item) => item.id !== id)


        },
      },
      computed: {
        isAllChecked: {
          get() {
            return this.checkList.length === this.datalist.length && this.datalist.length !== 0
          },
          set(checked) {
            this.checkList = checked ? this.datalist : []
          }
        },
        // 总金额
        sum() {
          return this.checkList.reduce((total, item) => total + item.price * item.number, 0)

        }
      }

    }

对比前面的写法，可以说是简洁很多