關於template標簽用法總結(含vue中的用法總結)

一、html5中的template標簽
html中的template標簽中的內容在頁面中不會顯示。但是在后台查看頁面DOM結構存在template標簽。這是因為template標簽天生不可見，它設置了display:none;屬性。

//當前頁面只顯示"我是自定義表現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。

<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
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這些指令。