vue3 实现点击改变显示

作者：kin
链接：https://www.zhihu.com/question/589175271/answer/2937062459
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

在组件的<script>标签中定义一个isHidden变量，并在组件的methods属性中添加一个toggleVisibility方法，以便在用户点击某个元素时，切换isHidden变量的值：

<script>
export default {
  data() {
    return {
      isHidden: true
    }
  },
  methods: {
    toggleVisibility() {
      this.isHidden = !this.isHidden
    }
  }
}
</script>

最后，在需要触发显示/隐藏效果的元素上添加一个@click事件，绑定到toggleVisibility方法上：

<template>
  <div>
    <button @click="toggleVisibility">Toggle Visibility</button>
    <div v-bind:class="{ hidden: isHidden }">
      <!-- 组件内容 -->
    </div>
  </div>
</template>

这样，当用户点击”Toggle Visibility”按钮时，toggleVisibility方法将被调用，isHidden变量的值将被切换，从而触发组件的显示/隐藏效果。其中，.hidden是一个CSS类，用于控制组件的隐藏效果，可以在CSS样式表中定义该类的样式：

.hidden {
  display: none;
}

这样，当isHidden变量的值为true时，组件的根元素将具有.hidden类，从而隐藏该组件。当isHidden变量的值为false时，.hidden类将被移除，从而显示该组件。