【vue】点击展开/收起功能_vue点击收起和展示数据-CSDN博客

本文链接：https://blog.csdn.net/qq_53966155/article/details/129039143

文章展示了如何在Vue.js应用中处理列表数据，当列表长度超过6时，额外的数据会被隐藏并显示展开按钮。通过点击展开按钮，可以显示全部内容，利用`brandFold`变量控制显示状态。同时，代码中使用`v-if`和`v-for`指令进行条件渲染和循环渲染。

摘要由CSDN通过智能技术生成

一、先看下效果(涉及个人姓名打个码)

展开前：

展开后：

二、代码

超出设置值（datalist.length > 6）数据时，多出的数据隐藏且“展开”按钮显示

<div class="releaseObject" style="margin-bottom: 1rem">
    <h3 class="title">下达对象</h3>
    <div class="objectCont" v-if="this.result2.length == 0">
      <div class="title" v-if="datalist.length != 0">名称</div>
      // 内容
      <div class="cont">
        // 注意这里遍历使用showdataList4，而不是datalist
        <div
          class="row"
          v-for="(cont1, index) in showdataList4"
          :key="index"
        >
          <img
            class="delete"
            @click="deleteObj(index)"
            src="@/assets/images/delete_icon.png"
            alt=""
          />
          <img
            class="person_img"
            src="~@/assets/images/peoson_img.png"
            alt=""
          />
          <p>{{ cont1.cellName }}</p>
        </div>
      </div>
      <img
        class="add_btn"
        @click="addobj"
        src="@/assets/images/add_icon.png"
        alt=""
      />
    </div>  
    // 展开收起模块(datalist长度>6时显示该模块，反之隐藏)      
    <div
      class="showMore"
      v-if="datalist.length > 6"
      @click="changeFoldState"
    >
      <span>{{ brandFold ? "展开" : "收起" }}</span>
      <img
        :src="
          require(`@/assets/images/arrow_${
            brandFold ? 'down' : 'up'
          }_icon.png`)
        "
        alt=""
      />
    </div>
  </div>

定义控制展开收起变量brandFold

data() {
    return {
        brandFold: true, //点击更多/收起(为true时显示“展开”)
        datalist: [], //请求接口获取到的数据列表
    }
}

dom结构中遍历数据要用showdataList4而不是datalist

computed: {
    showdataList4: {
      get: function () {
        if (this.brandFold) {
          if (this.datalist.length < 7) {
            return this.datalist;
          }
          let newArr = [];
          for (var i = 0; i < 6; i++) {
            let item = this.datalist[i];
            newArr.push(item);
          }
          return newArr;
        }
        return this.datalist;
      }
    },
  },
methods: {
    changeFoldState() {
      this.brandFold = !this.brandFold;
    },
}

~~~ end ~~~

最近喜欢的一首诗：

海水梦悠悠，君愁我亦愁。

南风知我意，吹梦到西洲。

~~ 感谢 ~~