Vue 实现抖音动态评论点击隐藏功能 - 简单易懂教程

<template>
  <div>
    <!-- 动态内容 -->
    <div>
      ...
    </div>
<pre><code>&lt;!-- 评论 --&gt;
&lt;div v-if=&quot;isCommentsVisible&quot;&gt;
  ...
&lt;/div&gt;

&lt;!-- 查看评论按钮 --&gt;
&lt;button @click=&quot;hideComments&quot; v-if=&quot;!isCommentsVisible&quot;&gt;查看评论&lt;/button&gt;
</code></pre>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isCommentsVisible: false
    };
  },
  methods: {
    hideComments() {
      this.isCommentsVisible = true;
    }
  }
};
</script>
<p>通过以上步骤，点击一次查看评论按钮后，评论会显示出来，再次点击按钮则会隐藏评论。</p>