Javascript Vue 2以编程方式创建切换传输

我刚刚查看了Vue JS文档中有关转换的一些示例代码。我正在尝试向每个列表项添加按钮，并使它们能够在每个列表中切换内容

下面是我的实例的一个示例：

<ul id="demo">
 <li>
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
 </li>

 <li>
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
 </li>
</ul>

new Vue({
  el: '#demo',
  data: {
    show: true
  }
})

切换
你好



切换
你好



新Vue({
el:'演示'，
数据：{
秀：真的
}
})

我如何通过编程允许我的两个

标记有自己的按钮，只显示其自身的内容

我知道我可以添加另一个名为

show2

的数据对象，并将按钮修改为

，但这是一个手动过程，我不想在添加新的

时执行

如何在Vue中通过编程实现这一点

---

谢谢

您应该创建另一个组件，让我们调用

切换表

。您可以使用道具或使用文档中显示的插槽传递内容

使用新组件，您可以对每个li使用它。如果您的数据也是动态的，请检查

v-for

它看起来类似于这样：

---

您应该创建另一个组件，让我们调用

切换表

。您可以使用道具或使用文档中显示的插槽传递内容

使用新组件，您可以对每个li使用它。如果您的数据也是动态的，请检查

v-for

它看起来类似于这样：