关于template标签用法总结(含vue中的用法总结)
一、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
