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>