Vue的包裹元素标签template

在此，可以把一个 元素当做不可见的包裹元素。
常用场景如下：

1，比如说当v-for和v-if要在同一个元素上时，而vue又不允许这样使用，这时而又不想新增一个标签，这里，就可以在v-for的外层使用template标签，在template上使用v-if

<template v-if="true">
     <div v-for="item in list" :key="item.id"></div>
</template>

2，比如说可以用在那些个HTML指定的上下级标签上，例如，你想在父元素上写ul,在子元素内写li时

//父组件
<ul>
     <Item></Item>
</ul>

子组件Item
<template>
    <li></li>
</template>

难道你就没有疑问，为什么在使用vue-cli脚手架时，最上层都会是一个template标签，如果你知道vue的html元素整体必须包裹在一个标签内，这个也就是说，我们也可以把这个template标签换成其它标签，毫无疑问，可以，但是你会发现当你审查元素时，使用template时，源代码中没有这个元素，而使用其它元素时，就会有相应的元素，这就是template标签相比其它标签所没有的优势，不可见。