关于 template 标签 在 js vue 中的用法

template 定义

内容模板 <template> 元素是一种用于保存客户端内容机制，该内容在加载页面时不会呈现。
将模板视为一个可存储在文档中以便后续使用的内容片段。虽然解析器在加载页面时确实会处理<template>元素的内容，但这样做只是为了确保这些内容有效；但元素内容不会被渲染。

说白了和input type=”hidden” 类似，一个储存字符状态，一个储存代码片段

js 中使用

IE完全不兼容，仅作为了解扩展！

<table id="producttable">
		  <thead>
		    <tr>
		      <td>UPC_Code</td>
		      <td>Product_Name</td>
		    </tr>
		  </thead>
		  <tbody>
		    <!-- 现有数据可以可选地包括在这里 -->
		  </tbody>
		</table>
		<input type="hidden" name="" id="" value="123123" />
		<template id="productrow">
		  <tr>
		    <td class="record"></td>
		    <td></td>
		  </tr>
		</template>


// 通过检查来测试浏览器是否支持HTML模板元素
		// 用于保存模板元素的内容属性。
		if ('content' in document.createElement('template')) {
		debugger
		  // 使用现有的HTML tbody实例化表和该行与模板
		  let t = document.querySelector('#productrow'),
		  td = t.content.querySelectorAll("td");
		  td[0].textContent = "1235646565";
		  td[1].textContent = "Stuff";
		
		  // 克隆新行并将其插入表中
		  let tb = document.getElementsByTagName("tbody");
		  let clone = document.importNode(t.content, true);
		  tb[0].appendChild(clone);
		
		  // 创建一个新行
		  td[0].textContent = "0384928528";
		  td[1].textContent = "Acme Kidney Beans";
		
		  // 克隆新行并将其插入表中
		  let clone2 = document.importNode(t.content, true);
		  tb[0].appendChild(clone2);
		
		} else {
		  // 找到另一种方法来添加行到表，因为不支持HTML模板元素。
		}

vue中使用

使用就可以配合使用v-for v-if来节约不必要的层级，来增加代码的可读性。
在vue中使用外层 的时候必须要嵌套一个根元素，否者报错。

V-for的使用
<div class="asd" style="font-size: 0.5rem;">
	<template v-for="item,index in people" >
		<div>测试{{index}}</div>
	</template>
</div>
V-if的使用
为了具体的体现，我层级嵌套的比较多。
//男1 女0
			<template v-for="(item,value) in people">
				<view class="asd" style="font-size: 0.5rem;">
					<template v-if="item.sex==1">
						<view class="isBlue">
							<template v-if="item.age<18">
								{{item.name}}未成年
							</template>
							<template v-else>
								{{item.name}}已成年
							</template>
						</view>
					</template>
					<template v-else>
						<view class="isRed">
							<template v-if="item.age<18">
								{{item.name}}未成年
							</template>
							<template v-else>
								{{item.name}}已成年
							</template>
						</view>
					</template>
				</view>
			</template>