<template>
  <div class="wrap">
    <div class="box">
      <div v-for="item in showItem">{{item}}</div>
      <div @click="showAll = !showAll">{{btnText}}</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return
 
 {
      foodList: [
        "蘋果", "香蕉", "橙子", "葡萄", "橘子" ,"柚子","柿子" //進行顯示的數據
      ],
      showAll: false  //標記數據是否需要完全顯示的屬性
    }
  },
  computed: {
    showItem() {
      if (this.showAll == false) { //當數據不需要完全顯示的時候
        var showItem = [];　　　　　//定義一個空數組
        if (this.foodList.length > 4) {　//這裏我們先顯示前四個
 

          for (var i = 0; i < 4; i++) {
            showItem.push(this.foodList[i])
          }
        } else {
          showItem = this.foodList
        }
        return showItem;　//返回當前數組
      } else {
        return this.foodList;
      }
    },
    btnText() {
      if (this.showAll == false
 
) {  //對文字進行處理（枚舉）
        return "展開全部"
      } else {
        return "收起"
      }
    }
  }
}
</script>
<style lang="scss" scoped>

</style>

vue展開收起小例子