template

在 Vue 应用中，除了可以正常的使用所有的 HTML 标签以外，Vue 还提供了一个特殊的标签 <template>

一、基础语法

template 标签的使用语法和普通标签一样：

<template>
</template>

但是和普通标签不同的是，template 是一个不可见的标签。我们在代码中编写的 template 标签，最终在浏览器中并不会渲染出来。
那么，一个并不会在页面中渲染出来的标签，有什么作用呢？

二、条件渲染与 template

template 标签还可以搭配条件渲染指令来使用。
当我们想要同时对多个元素进行条件判断时，也可以使用 template 标签来包裹这些元素。例如：

<template v-if="true">
    <h1>同时控制三个h1的渲染</h1>
    <h1>同时控制三个h1的渲染</h1>
    <h1>同时控制三个h1的渲染</h1>
</template>

三、列表渲染与 template

template 标签可以搭配 v-for 指令来使用。
当我们想要同时循环渲染多个元素时，就可以使用 template 标签来包裹这些元素。例如：

<template v-for="item in 3">
    <h1>同时遍历h1-h3</h1>
    <h2>同时遍历h1-h3</h2>
    <h3>同时遍历h1-h3</h3>
</template>

但是需要注意的是，key 属性不能定义在 template 身上。Vue 中要求 key 属性必须定义在一个真实节点身上。

<template v-for="item in 3">
    <h1 :key="item">同时遍历h1-h3</h1>
    <h2 :key="`${item}a`">同时遍历h1-h3</h2>
    <h3 :key="item + 'b'">同时遍历h1-h3</h3>
</template>