Vue.js 实现点击评论查看回复，只显示当前评论的回复 - 代码示例

\u003ctemplate\u003e\n \u003cdiv\u003e\n \u003cdiv v-for\u003d"comment in comments" :key\u003d"comment.id"\u003e\n \u003cp\u003e\u003c\u003e{{ comment.text }}\u003c\u003e\u003cp\u003e\n \u003cbutton @click\u003d"toggleReply(comment)"\u003e\n \u003c\u003e{{ comment.showReply ? '隐藏回复' : '查看回复' }}\u003c\u003e\n \u003cbutton\u003e\n \u003cdiv v-if\u003d"comment.showReply"\u003e\n \u003cdiv v-for\u003d"reply in comment.replies" :key\u003d"reply.id"\u003e\n \u003cp\u003e\u003c\u003e{{ reply.text }}\u003c\u003e\u003cp\u003e\n \u003cdiv\u003e\n \u003cdiv\u003e\n \u003cdiv\u003e\n \u003cdiv\u003e\n\u003c\u003e\n\n\u003cscript\u003e\n\u003cexport default {\n data() {\n return {\n comments: [\n {\n id: 1,\n text: '评论1',\n showReply: false,\n replies: [\n { id: 1, text: '回复1' },\n { id: 2, text: '回复2' }\n ]\n },\n {\n id: 2,\n text: '评论2',\n showReply: false,\n replies: [\n { id: 3, text: '回复3' },\n { id: 4, text: '回复4' }\n ]\n }\n ]\n };\n },\n methods: {\n toggleReply(comment) {\n comment.showReply = !comment.showReply;\n }\n }\n};\n\u003c\u003escript\u003e\n\n在上面的示例中，comments数组包含了两个评论。每个评论对象都有一个showReply属性来控制回复的显示状态。当点击“查看回复”按钮时，toggleReply方法会切换showReply属性的值，从而显示或隐藏回复。\n\n你可以根据自己的需求修改示例代码，例如添加更多的评论和回复，或者使用API从后端获取数据。