使用v-for在Vue中重新填充相同的div

Question

我认为这应该是Vue的基本概念，但是由于我是新手，所以我不太清楚如何获得自己正在尝试的东西。

我可以使用从数据库查询中使用V-for获取的信息来填充div。

但是我要做的是一次又一次地重复使用同一div，一次点击一次迭代（这是我正在尝试做的一项调查，回答一个问题，然后点击，然后您会得到下一个问题在同一屏幕上）。到目前为止，我的div在屏幕上重复了X次，这不是您想要的行为。

Answer 1

我假设你有这样的东西

<div v-for="question in questions">
 {{question}}
</div>

您可以将其更改为类似的内容

<div id="app">
  <div v-for="(q, index) in questions" v-show="currentQuestion == index">
   {{q}}
   <span @click="currentQuestion++">Next</span>
  </div>
</div>

您的数据应该是这样的

data: {
 questions: [1, 2, 3, 4, 5, 6,],
 currentQuestion: 1
}

v-for中的索引从vue的1开始。

注意：

• 您可以使用v-show而不是v-if，区别在于v-if从DOM中删除了标签，而v-show仅更改了{{1} }属性。
• 您应该阅读有关条件rendering的更多信息。