一、html5中的template標籤

html中的template標籤中的內容在頁面中不會顯示。但是在後臺檢視頁面DOM結構存在template標籤。這是因為template標籤天生不可見，它設定了display:none;屬性。

<!--當前頁面只顯示"我是自定義表現abc"這個內容，不顯示"我是template",這是因為template標籤天生不可見-->
<template><div>我是template</div></template>
<abc>我是自定義表現abc</abc>

二、template標籤操作的屬性和方法

• content屬性:在js中template標籤對應的dom物件存在content屬性，對應的屬性值是一個dom節點，節點的nodeName是#document-fragment。通過該屬性可以獲取template標籤中的內容，template物件.content可以呼叫getElementById、querySelector、querySelectorAll方法來獲取裡面的子節點。
• innerHTML:可以獲取template標籤中的html。

<template id="tem">
 <div id="div1">我是template</div>
 <div>我是template</div>
</template>
<script>
 let o = document.getElementById("tem");
 console.log(o.content.nodeName);//#document-fragment
 console.log(o.content.querySelectorAll("div"));//NodeList(2) [div#div1,div]。得到一個類陣列
 console.log(o.content.getElementById("div1"));//<div id="div1">我是template</div>
 console.log(o.innerHTML);//'<div id="div1">我是template</div><div>我是template</div>'
</script>

三、vue中的template

1、template標籤在vue例項繫結的元素內部

它是可以顯示template標籤中的內容，但是檢視後臺的dom結構不存在template標籤。如果template標籤不放在vue例項繫結的元素內部預設裡面的內容不能顯示在頁面上，但是檢視後臺dom結構存在template標籤。

<div id="app">
 <!--此處的template標籤中的內容顯示並且在dom中不存在template標籤-->
 <template>
 <div>我是template</div>
 <div>我是template</div>
 </template>
</div>
<!--此處的template標籤中的內容在頁面中不顯示，但是在dom結構存在該標籤及內部結構-->
<template id="tem">
 <div id="div1">我是template</div>
 <div>我是template</div>
</template>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
 let vm = new Vue({
 el: "#app",});
</script>

注意： vue例項繫結的元素內部的template標籤不支援v-show指令，即v-show="false"對template標籤來說不起作用。但是此時的template標籤支援v-if、v-else-if、v-else、v-for這些指令。

<div id="app">
 <template v-if="true">
 <!--此時template標籤中的內容顯示在頁面上，但是看dom結構沒有template標籤-->
 <div>我是template</div>
 <div>我是template</div>
 </template>
 <div v-if="true">
 <!--此時頁面上顯示div標籤中的內容，並且看dom結構存在最外面的div標籤-->
 <div>我是template</div>
 <div>我是template</div>
 </div>
 <!--此處會輸出6個‘我是template'並且dom結構中不存在template標籤-->
 <template v-for="a in 3">
 <div>我是template</div>
 <div>我是template</div>
 </template>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
 let vm = new Vue({
 el: "#app",});
</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中定義的資料。

<!--此處頁面顯示hello-->
<div id="app"></div>
<!--此處template標籤必須在vue繫結的元素外面定義，並且在頁面中不顯示下面的template標籤中的內容-->
<template id="first">
 <div v-if="flag">{{msg}}<div>
 <div v-else>111<div>
</template>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
 let vm = new Vue({
 el:"#app",data:{
  msg:"hello",flag:true
 },template:"#first"//通過該屬性可以將自定義的template屬性中的內容全部替換app的內容，並且會覆蓋裡面原有的內容，並且在檢視dom結構時沒有template標籤
 });
</script>

上面的例子中html中的template標籤可以變成自定的標籤，如下。但是下面這種方式也可以將<abc></abc>標籤中的內容替換掉app元素，但是<abc></abc>標籤中的內容也會顯示在頁面上。所以此處利用template標籤來定義vue例項中需要設定的template屬性。

<abc id="first">
 <div v-if="flag">{{msg}}<div>
 <div v-else>111<div>
</abc>

上面的例項還可以寫成下面的形式

<!--此處頁面顯示hello-->
<div id="app"></div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
 let vm = new Vue({
 el:"#app",template:"<div v-if='flag'>{{msg}}</div><div v-else>123</div>"//模板中只能有一個根元素，如果有多個需要使用v-if、v-else、v-else-if來選擇顯示哪一個
 });
</script>

到此這篇關於詳解template標籤用法(含vue中的用法總結)的文章就介紹到這了,更多相關template標籤用法內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！