zoukankan      html  css  js  c++  java
  • 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;
              }
  • 相关阅读:
    Pascal's Triangle II
    Pascal's Triangle
    Best Time to Buy and Sell Stock II
    Best Time to Buy and Sell Stock
    Populating Next Right Pointers in Each Node
    path sum II
    Path Sum
    [转载]小波时频图
    [转载]小波时频图
    [转载]Hilbert变换及谱分析
  • 原文地址:https://www.cnblogs.com/Byme/p/14700739.html
Copyright © 2011-2022 走看看