VueJS如何做到這一點種的 「for」 循環：for（I = 0;我<X;我++）

Question

我試圖使for循環像這樣在vue.js：

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