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，以便呈现一系列值：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Here's the documentation on v-for.

VueJS如何做这种“for”循环：for（i = 0; i＆lt; x; i ++）

1 个答案: