HTML5提供的新標簽，具有以下特性：
1、該元素天生display:none，同時模板元素內部內容也是隱藏的
2、位置任意，可以在<head>中，也可以在<body>或者<frameset>中。
3、獲取template.childNodes是空，想獲取里面的偽子元素，使用template.content，會返回一個文檔片段，你可以理解為另外一個document，然后，使用document下的一些查詢API。如：
var image_first = template.content.querySelector("img");
如果想切換多個元素，此時可以把一個 <template> 元素當做不可見的包裹元素，並在上面使用 v-if。最終的渲染結果將不包含 <template> 元素。
<template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username"> </template> <template v-else> <label>Email</label> <input placeholder="Enter your email address"> </template>
參考文章：