如何通过点击实现数组切片/还原，切换列表显示数量？

核心问题是不要直接修改原始数组，不然切回部分显示时找不到完整数据。正确做法是保存原始数组，用状态变量控制显示逻辑：

• 把完整列表存在originalItems里做数据源备份
• 用布尔变量isShowAll标记当前显示状态
• 通过计算属性根据isShowAll返回对应要展示的列表

完整代码示例：

<template>
  <div>
    <!-- 遍历计算属性返回的列表 -->
    <div v-for="(item, index) in displayItems" :key="index">
      {{ item }}
    </div>
    <button @click="toggleShow">
      {{ isShowAll ? '收起列表' : '显示全部' }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 保存完整的原始列表
      originalItems: ['项1', '项2', '项3', '项4', '项5', '项6', '项7', '项8', '项9', '项10'],
      // 初始状态：仅显示前3项
      isShowAll: false
    }
  },
  computed: {
    displayItems() {
      // 根据状态切换列表：true返回全部，false返回前3项
      return this.isShowAll ? this.originalItems : this.originalItems.slice(0, 3)
    }
  },
  methods: {
    toggleShow() {
      // 切换显示状态
      this.isShowAll = !this.isShowAll
    }
  }
}
</script>

关键细节：

• slice(0,3)：slice是左闭右开的截取逻辑，0到3会取索引0、1、2的元素，正好对应前3项
• 计算属性displayItems会自动跟随isShowAll的变化更新，无需手动操作数组
• 按钮文字随状态切换，用户体验更直观

内容的提问来源于stack exchange，提问作者Maflec