vue展开收起小例子

Posted 2020-10-31 鱼樱、、

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