如何显示将Vue静态数据转换为模态？

Question

我有这两个要素

<div>
<span>title one </span>
<button @click='open =! ooen'>show</button>
</div>
<div>
<span>title two </span>
<button @click='open =! ooen'>show</button>
</div>

在同一组件中，我显示了此模式。我需要在其中显示的是，如果单击第一个按钮，显示标题1，如果单击按钮2，显示标题2，依此类推... ...>

执行此任务的最佳方法是什么？

抱歉，我正在用手机

我有这两个元素

标题1 显示

] >> <...>

< [

首先有两件事：

[ooen可能是拼写错误，您是说open吗？

=!看起来像是单个运算符，但在此上下文中实际上表示open = !open。在=和!之间放置一个空格，以清楚说明其含义。

如果要独立控制两个部分的可见性，则将需要两个单独的数据属性（open1和open2）。使用v-if或v-show控制可见性。

<div>
  <span v-if="open1">title one</span>
  <button @click="open1 = !open1">show</button>
</div>
<div>
  <span v-if="open2">title two</span>
  <button @click="open2 = !open2">show</button>
</div>

如果有很多这样的功能，则可以将功能包装到一个单独的组件中，这样就不必定义open1，open2，...等。

Answer 1