vue 抖音 动态查看评论点击一次后隐藏此字样

在Vue中，可以使用条件渲染来实现点击一次后隐藏评论的功能。

首先，在Vue组件的模板中，使用v-if指令来判断是否隐藏评论。将评论部分包裹在一个<div>元素中，并设置v-if指令的条件为一个响应式数据，比如isCommentsVisible。

<template>
  <div>
    <!-- 动态内容 -->
    <div>
      ...
    </div>

    <!-- 评论 -->
    <div v-if="isCommentsVisible">
      ...
    </div>

    <!-- 查看评论按钮 -->
    <button @click="hideComments" v-if="!isCommentsVisible">查看评论</button>
  </div>
</template>

然后，在Vue组件的data选项中定义isCommentsVisible变量，并在methods选项中定义hideComments方法来切换isCommentsVisible的值。

<script>
export default {
  data() {
    return {
      isCommentsVisible: false
    };
  },
  methods: {
    hideComments() {
      this.isCommentsVisible = true;
    }
  }
};
</script>

最后，根据实际需要，可以使用CSS样式来美化查看评论按钮的外观。

通过以上步骤，点击一次查看评论按钮后，评论会显示出来，再次点击按钮则会隐藏评论