Vue中循环多条数据，内容过多显示展开，否则隐藏，这个展开得控制条件如何处理？

Question

Answer 1

你可以用一个对象作为映射表来存储哪些是展开的项目。每一项都有唯一id的吧？

<template>
  <div>
    <div
      v-for="data of dataList"
      :class="expandMap[data.id] ? 'expand' : 'collapse'"
      :key="data.id">
      {{ data.content }}
    </div>
  </div>
</template>

export default {
  data () {
    return {
      dataList: [],
      expandMap: {}
    }
  },
  methods: {
    expand (data) {
      this.$set(this.expandMap, data.id, 1)
    },
    collapse (data) {
      this.$delete(this.expandMap. data.id)
    }
  }
}

.collapse {
  max-height: 300px;
  overflow: hidden;
}

.expand {
  max-height: none;
}

展开/收起按钮就很简单了