vuejs中没有包装元素的循环元素

Question

我想通过 v-for:

生成以下代码

<div class="rating-container">
    <input type="radio" name="star" value="5" id="star-5">
    <label class="star-radio" for="star-5">5</label>
    <input type="radio" name="star" value="4" id="star-4">
    <label class="star-radio" for="star-4">4</label>
    <input type="radio" name="star" value="3" id="star-3">
    <label class="star-radio" for="star-3">3</label>
    <input type="radio" name="star" value="2" id="star-2">
    <label class="star-radio" for="star-2">2</label>
    <input type="radio" name="star" value="1" id="star-1">
    <label class="star-radio" for="star-1">1</label>
</div>

但我需要让它们保持相同的顺序，我的意思是，label 紧跟在 radio input 元素之后，我知道 v-for 在 input标记或 label 元素将首先生成所有 input，然后生成所有 labels

有什么方法可以用 vuejs 做到这一点 v-for 以便我可以保留元素顺序并使用循环生成它们？

Answer 1

您可以将模板标签用作

The template element holds HTML code without displaying it

<div id="app">
<div class="rating-container" >
  <template v-for="n in 5">
    <input type="radio" name="star" :value="n" :id="'star-'+ n">
    <label class="star-radio" :for="'star-'+ n">{{n}}</label>
  </template>
</template>
</div>

如果你想以相反的方式循环遍历项目，你必须自己做

vuejs中没有包装元素的循环元素

looping elements without a wrapper element in vuejs

vue.js

v-for