vue利用計算屬性做（展開收起）小例子

<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>