使用 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只改变了值的 display 属性.
您应该阅读有关条件 rendering 的更多信息。

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

Re-fill same div in Vue using v-for

vue.js

populate