一、html5中的template標簽
html中的template標簽中的內容在頁面中不會顯示。但是在后台查看頁面DOM結構存在template標簽。這是因為template標簽天生不可見，它設置了display:none;屬性。
1 <!--當前頁面只顯示"我是自定義表現abc"這個內容，不顯示"我是template",這是因為template標簽天生不可見--> 2 <template><div>我是template</div></template> 3 <abc>我是自定義表現abc</abc>
二、template標簽操作的屬性和方法
content屬性:在js中template標簽對應的dom對象存在content屬性，對應的屬性值是一個dom節點，節點的nodeName是#document-fragment。通過該屬性可以獲取template標簽中的內容，template對象.content可以調用getElementById、querySelector、querySelectorAll方法來獲取里面的子節點。
innerHTML:可以獲取template標簽中的html。
1 <template id="tem"> 2 <div id="div1">我是template</div> 3 <div>我是template</div> 4 </template> 5 <script> 6 let o = document.getElementById("tem"); 7 console.log(o.content.nodeName);//#document-fragment 8 console.log(o.content.querySelectorAll("div"));//NodeList(2) [div#div1, div]。得到一個類數組 9 console.log(o.content.getElementById("div1"));//<div id="div1">我是template</div> 10 console.log(o.innerHTML);//'<div id="div1">我是template</div><div>我是template</div>' 11 </script>
三、vue中的template
1、template標簽在vue實例綁定的元素內部
它是可以顯示template標簽中的內容，但是查看后台的dom結構不存在template標簽。如果template標簽不放在vue實例綁定的元素內部默認里面的內容不能顯示在頁面上，但是查看后台dom結構存在template標簽。
1 <div id="app"> 2 <!--此處的template標簽中的內容顯示並且在dom中不存在template標簽--> 3 <template> 4 <div>我是template</div> 5 <div>我是template</div> 6 </template> 7 </div> 8 <!--此處的template標簽中的內容在頁面中不顯示，但是在dom結構存在該標簽及內部結構--> 9 <template id="tem"> 10 <div id="div1">我是template</div> 11 <div>我是template</div> 12 </template> 13 <script src="node_modules/vue/dist/vue.js"></script> 14 <script> 15 let vm = new Vue({ 16 el: "#app", 17 }); 18 </script>
注意： vue實例綁定的元素內部的template標簽不支持v-show指令，即v-show="false"對template標簽來說不起作用。但是此時的template標簽支持v-if、v-else-if、v-else、v-for這些指令。
1 <div id="app"> 2 <template v-if="true"> 3 <!--此時template標簽中的內容顯示在頁面上，但是看dom結構沒有template標簽--> 4 <div>我是template</div> 5 <div>我是template</div> 6 </template> 7 <div v-if="true"> 8 <!--此時頁面上顯示div標簽中的內容，並且看dom結構存在最外面的div標簽--> 9 <div>我是template</div> 10 <div>我是template</div> 11 </div> 12 <!--此處會輸出6個‘我是template’並且dom結構中不存在template標簽--> 13 <template v-for="a in 3"> 14 <div>我是template</div> 15 <div>我是template</div> 16 </template> 17 </div> 18 <script src="node_modules/vue/dist/vue.js"></script> 19 <script> 20 let vm = new Vue({ 21 el: "#app", 22 }); 23 </script>
2、vue實例中的template屬性
將實例中template屬性值進行編譯，並將編譯后的dom替換掉vue實例綁定的元素，如果該vue實例綁定的元素中存在內容，這些內容會直接被覆蓋。
特點：
1）如果vue實例中有template屬性，會將該屬性值進行編譯，將編譯后的虛擬dom直接替換掉vue實例綁定的元素（即el綁定的那個元素）；
2）template屬性中的dom結構只能有一個根元素，如果有多個根元素需要使用v-if、v-else、v-else-if設置成只顯示其中一個根元素；
3）在該屬性對應的屬性值中可以使用vue實例data、methods中定義的數據。
1 <!--此處頁面顯示hello--> 2 <div id="app"></div> 3 <!--此處template標簽必須在vue綁定的元素外面定義，並且在頁面中不顯示下面的template標簽中的內容--> 4 <template id="first"> 5 <div v-if="flag">{{msg}}<div> 6 <div v-else>111<div> 7 </template> 8 <script src="./node_modules/vue/dist/vue.js"></script> 9 <script> 10 let vm = new Vue({ 11 el:"#app", 12 data:{ 13 msg:"hello", 14 flag:true 15 }, 16 template:"#first"//通過該屬性可以將自定義的template屬性中的內容全部替換app的內容，並且會覆蓋里面原有的內容，並且在查看dom結構時沒有template標簽 17 }); 18 </script>
上面的例子中html中的template標簽可以變成自定的標簽，如下。但是下面這種方式也可以將<abc></abc>標簽中的內容替換掉app元素，但是<abc></abc>標簽中的內容也會顯示在頁面上。所以此處利用template標簽來定義vue實例中需要設置的template屬性。
1 <abc id="first"> 2 <div v-if="flag">{{msg}}<div> 3 <div v-else>111<div> 4 </abc>
上面的實例還可以寫成下面的形式
1 <!--此處頁面顯示hello--> 2 <div id="app"></div> 3 <script src="./node_modules/vue/dist/vue.js"></script> 4 <script> 5 let vm = new Vue({ 6 el:"#app", 7 data:{ 8 msg:"hello", 9 flag:true 10 }, 11 template:"<div v-if='flag'>{{msg}}</div><div v-else>123</div>"//模板中只能有一個根元素，如果有多個需要使用v-if、v-else、v-else-if來選擇顯示哪一個 12 }); 13 </script>
原文鏈接：https://blog.csdn.net/u010510187/java/article/details/100356624