vue 展开收缩功能 收起展开

<template>
  <div>
    <div v-for="(item, key) in items" >
      <div v-show="key < num">{{ item }}</div>
    </div>
    <span @click="showMore">{{ txt }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ["a", "b", "c", "d", "e", "f"],
      isShow: true,
      txt: "显示全部",
      num: 3,
    };
  },
  methods: {
    showMore() {
      this.isShow = !this.isShow;
      this.num = this.isShow ? 3 : this.items.length;
      this.txt = this.isShow ? "显示全部" : "收起";
    },
  },
};
</script>