javascript - 以下元素的 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 最初应该是:display: none

我怎么能在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,
  };
}