javascript - VueJS如何做这种 "for"循环: for(i = 0; i < x; i++)

Question

我正在尝试在 vue.js 中创建一个像这样的 for 循环:

<div class="row" v-for="i = 0; i < numberOfRanking; i++">
   <div class="col s6 m6 l6">
     Rank 1
   </div>
   <div class="col s6 m6 l6">
     <input type="text" name="reward-sph-rank-1">
   </div>
</div>

我想生成动态字段，用户将在其中选择应添加的排名。我怎样才能做到这一点？

Answer 1

您可以将整数值传递给 v-for 以呈现一系列值:

new Vue({
  el: '#app',
  data() {
    return {
      numberOfRanking: 4,
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.1/vue.min.js"></script>
<div id="app">
  <div class="row" v-for="i in numberOfRanking">
    <div class="col s6 m6 l6">
      Rank {{ i }}
    </div>
    <div class="col s6 m6 l6">
      <input type="text" :name="'reward-sph-rank-' + i">
    </div>
  </div>
</div>

Here's the documentation on v-for.