在NuxtJs中显示更多或更少的动态列表

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index" v-if="index < limit">
        {{ item }}
      </li>
    </ul>
    <button @click="showMoreItems">Show {{ showMore ? 'Less' : 'More' }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7', 'Item 8', 'Item 9', 'Item 10'],
      limit: 5, // 默认显示的列表项数量
      showMore: false // 控制是否显示更多列表项
    };
  },
  methods: {
    showMoreItems() {
      this.showMore = !this.showMore;
      this.limit = this.showMore ? this.items.length : 5;
    }
  }
};
</script>

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index" :class="{'hidden-item': !showMore && index >= limit}">
        {{ item }}
      </li>
    </ul>
    <button @click="showMoreItems">Show {{ showMore ? 'Less' : 'More' }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7', 'Item 8', 'Item 9', 'Item 10'],
      limit: 5, // 默认显示的列表项数量
      showMore: false // 控制是否显示更多列表项
    };
  },
  methods: {
    showMoreItems() {
      this.showMore = !this.showMore;
      this.limit = this.showMore ? this.items.length : 5;
    }
  }
};
</script>

<style>
.hidden-item {
  display: none;
}
</style>