vue隐藏列表点击当前列表项，显示列表详情，其它列表项隐藏

 

 

 

 

<div
              v-for="(item, index) in newList"
              class="floor-board-contbox-sub-t"
            >
              <div class="contbox-sub-t-f">
                <div
                  :class="item.isShow ? 'corner-l' : 'corner'"
                  @click="showItem(item, index)"
                ></div>
                <!-- <div :class="item.isShow ? 'corner-l' : 'corner'"></div> -->
                <div>abcidf</div>
                <div>{{ item.name }}</div>
                <div>在线</div>
              </div>
              <div class="contbox-sub-t-s" v-if="item.isShow">
                {{ item.name }}
              </div>
            </div>
          </div>

list: [
        {
          name: "name1",
          id: 1,
          delivery: false,
        },
        {
          name: "name3",
          id: 2,
          delivery: false,
        },
        {
          name: "name4",
          id: 3,
          delivery: true,
        },
        {
          name: "name5",
          id: 4,
          delivery: true,
        },
        {
          name: "name6",
          id: 5,
          delivery: false,
        },
        {
          name: "name7",
          id: 6,
          delivery: true,
        },
      ],

computed: {
    newList() {
      return this.list.map((item) => {
        this.$set(item, "isShow", false);
        return item;
      });
    },
  },

 showItem(item, index) {
      const newStatus = item.isShow;
      this.list.forEach((item) => {
        item.isShow = false;
      });
      item.isShow = !newStatus;
    },

.contbox-sub-t-f {
            display: flex;
            width: 100%;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            height: 44px;
            .corner {
              width: 0px; /*  宽高设置为0，很重要，否则达不到效果 */
              height: 0px;
              border: 10px solid #fff;
              border-bottom-color: transparent; /* 设置透明背景色 */
              border-top-color: transparent;
              border-right-color: transparent;
            }
            .corner-l {
              width: 0px; /*  宽高设置为0，很重要，否则达不到效果 */
              height: 0px;
              border: 10px solid #fff;
              border-bottom-color: transparent; /* 设置透明背景色 */
              border-left-color: transparent;
              border-right-color: transparent;
            }
          }
          .contbox-sub-t-s {
            display: flex;
            width: 100%;
            background: red;
          }