以下元素的Vue 2切换类

Question

我正在尝试在点击时切换另一个 div 的类。

类似：

<div class="link">
 <p> Click here to show the content </p>
 <div class="content">
  <p>This is the hidden content</p>
 </div>
</div>

所以内容 css 最初应该是：显示：无

如何在 vue 上做到这一点，当点击 p 时，切换下面的元素。

提前谢谢！

Answer 1

如果您使用v-show directive，则不需要为此使用 css 类：

<div class="link">
  <p @click="show = true"> Click here to show the content </p>
  <div v-show="show" class="content">
    <p>This is the hidden content</p>
  </div>
</div>

在您的 Vue 组件中，您只需添加一个初始设置为 false 的 show 属性：

data() {
  return {
    show: false,
  };
}