vue中template的作用,与div有什么区别?

在某个场景中,使用v-for做了一个循环:

<div id="app">
    <div>
            <div v-for="(item,index) in List" :key="item.id">{{item.text}}
            </div>
            <span>{{item.text}}</span>
    </div>
</div>

基于某种需求,这时候需要对其中的span也一起循环.

这时候有3个选择:

1.再用v-for对span进行一次循环:

<span v-for="(item,index) in List" :key="item.id">{{item.text}}</span>

这个方法也能实现,但是很蠢...

2. 在div和span外面加个父级div,让这个div循环

<div id="app">
    <div v-for="(item,index) in List" :key="item.id">
        <div>{{item.text}}</div>
        <span>{{item.text}}</span>
    </div> 
</div>

一般来说都会这么用,也没啥问题,但是会产生一个没有意义的div,不利于代码简洁

3. 使用template实现

<template v-for="(item,index) in List" :key="item.id">
    <div>{{item.text}}</div>
    <span>{{item.text}}</span>
</template>

template的作用是模板占位符，可帮助我们包裹元素，但在循环过程当中，template不会被渲染到页面上