Question

我刚刚看了一下有关转换的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
  }
})

我如何以编程方式允许我的两个<li>代码拥有自己的按钮，这些按钮只显示其内部的内容？

我知道我可以添加另一个名为show2的数据对象并将按钮修改为<button v-on:click="show2 = !show2">但是这是一个我不想做的新手动过程<li>已添加。

我如何在Vue中以编程方式实现此目的？

由于

Answer 1

您应该创建另一个组件，让我们调用Togglable。您可以使用道具或使用插槽传递内容，如文档here

所示

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

它看起来与此相似：

<togglable content="hello" button-name="Toggle"></togglable>

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

1 个答案: