How can for not output itself in vuejs?

for example, I have a form that is generated from an array

<form>
    <input v-for="n in 10"></input>
</form>

but the content of my form is not just input . I want to output the corresponding tags based on the data in the array to achieve this effect:

<form>
    <input></input>
    <hr/>
    <div>div</div>
</form>

then I can only write

<form>
    <div v-for="n in 10">
        <input v-if="n==0"></input>
        <hr v-if="n==1"></hr>
    </div>
</form>

the effect of this is actually like this:

<form>
    <div>
        <input></input>
    </div>
    <div>
        <hr></hr>
    </div>
</form>
The

loop is actually written in the subkey of form, and I don"t want to wrap each subitem with a layer of div,.

that is, I just want a for loop instead of outputting the tag where the for itself is located.

Jan.21,2022

just add the v-for directive to this tag:

<template></template>

<form>
    <template v-for="n in 10">
        <input v-if="n==0"></input>
        <hr v-if="n==1"></hr>
    </template>
</form>

ide/list.html-sharpv-for-on-a-lt-template-gt" rel=" nofollow noreferrer "> Vue.js guide: list rendering-v-for on template

Menu