Vue.js 展开收起示例

demo.vue

<template>
    <div>
        <ul>
            <li
                v-for="(item, index) in comments"
                :key="index"
            >
                <p>{{ item.content }}</p>
                
                <ul
                    class="reply-list"
                    :class="{ 'is-show-more-reply': item.replyMore }"
                    v-if="item.replys && item.replys.length"
                >
                    <li
                        v-for="(reply, replyIndex) in item.replys"
                        :key="replyIndex"
                    >
                        {{ reply.content }}
                    </li>
                </ul>

                <span
                    v-if="item.replys && item.replys.length > 1"
                    @click="switchReply(index)"
                >{{ item.replyMore ? '收起' : '展开' }}</span>

                <button @click="item.replys.push({ content: `我是测试回复-${Date.now()}` })">添加一个测试回复</button>
            </li>
        </ul>

        <button @click="comments.push({ replys: [], content: `我是测试评论-${Date.now()}` })">添加一个测试评论</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            comments: [
                {
                    content: '我是评论内容',
                    replys: [
                        {
                            content: '回复1',
                        },
                        {
                            content: '回复2',
                        },
                        {
                            content: '回复3',
                        },
                    ],
                    // replyMore: false, // 回复展开状态
                },
            ],
        };
    },

    methods: {
        switchReply(index) {
            this.$set(this.comments[index], 'replyMore', !this.comments[index].replyMore);
        },
    },
};
</script>

<style>
.reply-list {
    overflow: hidden;
    max-height: 30px;
}
.reply-list.is-show-more-reply {
    max-height: 100000px;
}
</style>

重要点：

1. 未来元素时，如果没有初始化对应的属性（此示例是 replyMore）时，需要用 $set 设置
2. 数据初始化字段很重要