HTML中使用<template>：
<template>：内容模板元素 - HTML（超文本标记语言） | MDN：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/template- HTML
<template>标签：https://www.w3school.com.cn/tags/tag_template.asp
<template>特性
根据MDN的定义： HTML 内容模板（<template>）元素是一种用于保存客户端内容机制，该内容在加载页面时不会呈现，但随后可以 (原文为 may be) 在运行时使用 JavaScript 实例化。
这个标签的目的是： 将模板视为一个可存储在文档中以便后续使用的内容片段，如果有一些需要重复使用的 HTML 代码，则可以使用 <template> 标记。
虽然解析器在加载页面时确实会处理 <template> 元素的内容，但这样做只是为了确保这些内容有效,元素内容不会被渲染。
举个例子：
<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
<style>
body {
text-align: center;
color: black;
}
</style>
</head>
<body>
<template id="template">content</template>
</body>
</html>
可以发现实际会渲染出一个template标签且有id，但并没有看到内容，因为其默认样式是隐藏的：
使用<template>
检测是否能用template标签：
if (document.createElement("template").content) {}
if ("content" in document.createElement("template")) {}
一般的使用流程：
要想让template里的内容显示出来就要用javascript把template里的内容转移到template外。
- 获取
<template>的引用：querySelector - 克隆
<template>的内容：importNode - 嫁接
<template>的内容：appendChild
举个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
table {
background: #000;
}
table td {
background: #fff;
}
</style>
<body>
<table id="producttable">
<thead>
<tr>
<td>UPC_Code</td>
<td>Product_Name</td>
</tr>
</thead>
<tbody></tbody>
</table>
<template id="productrow">
<tr>
<td>111</td>
<td>222</td>
</tr>
</template>
<script>
if ('content' in document.createElement('template')) {
// 获取template引用
let t = document.querySelector('#productrow')
// 克隆template内容
let clone = document.importNode(t.content, true)
// 嫁接template内容
let tb = document.getElementsByTagName('tbody')
tb[0].appendChild(clone)
} else {
}
</script>
</body>
</html>
Vue中使用<template>
举个例子：
<html>
<head>
<title>VueJs 在线编辑器</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js">
</script>
</head>
<body>
<div id="intro" style="text-align:center;">
<template id="template">
template content
</template>
</div>
<script type="text/javascript">
var vue_det = new Vue({
el: '#intro',
data: {
}
});
</script>
</body>
</html>
查看渲染结果可以发现没有template标签只有template的内容，自然也没有template上的id。
结合v-if进行使用：
<div id="intro" style="text-align:center;">
<template id="template" v-if="status">
template content
</template>
</div>
status为true时和没有使用v-if时一样，为false时：
可以发现完全没有template元素。
