vue 展开更多和收起案例

实现代码

<template>
  <div>
    <ul>
      <li v-for="(item, index) in Showhidden" :key="index">
        {{ item.age }}
        {{ item.name }}
      </li>
    </ul>
    <div @click="showAll = !showAll" class="show-more">
      {{ showAll ? "收起" : "展开全部" }}
    </div>
  </div>
</template>
 
<script>
export default {
  name: "Login",
  components: {},
  data() {
    return {
      list: [
        { age: 13, name: "张三" },
        { age: 14, name: "李四" },
        { age: 15, name: "王五" },
        { age: 16, name: "赵六" },
        { age: 17, name: "小明" },
        { age: 18, name: "小米" },
        { age: 19, name: "小高" },
        { age: 20, name: "小任" },
        { age: 21, name: "小茹" },
        { age: 22, name: "小白" },
      ],
      showAll: false,
    };
  },
  computed: {
    Showhidden() {
      if (this.showAll == false) {
        //不显示全部数据
        var showList = []; //空数组
        if (this.list.length > 6) {
          //只显示6条
          for (var i = 0; i < 6; i++) {
            showList.push(this.list[i]); //将数组对象的前5条存放到showList数组中
          }
        } else {
          showList = this.literarys; //个数足够显示，不需要在截取
        }
        return showList;
      } else {
        //显示全部数据
        return this.list;
      }
    },
  },
  methods: {},
};
</script>
 
<style scoped>
ul {
  list-style: none;

  margin: 0;
  padding: 0;

  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
li {
  flex: 1;
  height: 30px;
  border: 1px solid pink;
  background-color: #999;
  width: calc((100% - 10px) / 4);
  min-width: calc((100% - 10px) / 4);
  max-width: calc((100% - 10px) / 4);
}
li:nth-child(4n) {
  margin-right: 0;
}
.show-more {
  width: 100px;
  height: 50px;
  display: flex;
  align-items: center; /*垂直*/
  justify-content: center; /*水平*/
  background-color: cornflowerblue;
  border: cornflowerblue 1px solid;
}
</style>

展开效果图

收起效果图