技術標籤：Vuevuejs列表

使用了計算屬性computed的特點來實現動態全選按鈕的功能，
程式碼如下

<template>
  <div class="box">
    <div class="allselect" @click="allSelect()">
      <img :src="isAllSelect ? selectUrl : notSelectUrl" alt="" />
      <div>全選<
 
/div>
    </div>
    <div v-for="(item, index) in goodList" :key="index" class="list" @click="itemClick(item)">
      <img :src="item.select ? selectUrl : notSelectUrl" alt="" />
      <div>{{ item.name }}</div>
 

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //選中圖示
      selectUrl: require("../assets/select.png"),
      //未選中圖示
      notSelectUrl: require("../assets/notSelect.png"),
      //商品列表
      goodList: [
        { name: "商品1"
 
, select: true },
        { name: "商品2", select: true },
        { name: "商品3", select: true },
        { name: "商品4", select: true },
        { name: "商品5", select: true },
        { name: "商品6", select: true },
      ],
    };
  },
  methods: {
    //全選與不全選
    allSelect() {
      //若標識為true，則讓所有商品不全選
      if (this.isAllSelect) {
        this.goodList.forEach((item) => (item.select = false));
      } else {
        //若標識為false，則讓所有商品全選
        this.goodList.forEach((item) => (item.select = true));
      }
    },
    //商品選擇與不選擇
    itemClick(item){
      item.select=!item.select
    }
  },
  computed: {
    //返回被選中的商品列表
    selectList() {
      return this.goodList.filter((item) => item.select);
    },
    //動態判斷是否全選
    isAllSelect() {
      return this.goodList.length === this.selectList.length;
    },
  },
};
</script>
<style scoped>
.box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.list {
  display: flex;
  margin-bottom: 2px;
  cursor: pointer;
}
.list img {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
.allselect {
  display: flex;
  margin-bottom: 10px;
  cursor: pointer;
}
.allselect img {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
</style>

實現效果如下

我們只需要判斷已選中的商品列表長度與全部商品的列表長度是否一致，就可以達到動態全選與不全選的效果了