template标签配合vue用法
template标签中的内容默认在页面中是不显示的，一般会使用template标签配合vue来替换另一个标签中的内容
案例1：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <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").innerHTML);//<div id="div1">我是template</div> console.log(o.innerHTML);//'<div id="div1">我是template</div><div>我是template</div>' </script> </body> </html>
效果：
上述案例可以看出template标签中的内容不会展示在页面中，但是可以通过content属性来获取相应的值打印在console中
案例2：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let vm = new Vue({ el: "#app", }); </script> </body> </html>
效果：
上述案例可以看出被vue实例绑定的元素内部的template标签中的内容可以展示在页面上，而不被绑定的依旧不显示在页面上
案例3：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <h3>template v-if="true"</h3> <template v-if="true"> <!--此时template标签中的内容显示在页面上，但是看dom结构没有template标签--> <div>我是template</div> <div>我是template</div> </template> <h3>div v-if="true"</h3> <div v-if="true"> <!--此时页面上显示div标签中的内容，并且看dom结构存在最外面的div标签--> <div>我是template</div> <div>我是template</div> </div> <h3>template v-for</h3> <!--此处会输出6个‘我是template’并且dom结构中不存在template标签--> <template v-for="a in 3"> <div>我是template</div> <div>我是template</div> </template> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let vm = new Vue({ el: "#app", }); </script> </body> </html>
效果：
上述案例可以看出template标签支持v-if、v-else-if、v-else、v-for这些指令。但是template标签不支持v-show指令，即v-show="false"对template标签来说不起作用
案例4：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"></div> <template id="first"> <div v-if="flag">{{msg}}</div> <div v-else>111</div> </template> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let vm = new Vue({ el: "#app", data:{ msg:"你好", flag:true }, template:"#first" }); </script> </body> </html>
当flag为true是，显示“你好”，否则显示“111”
效果：
上述案例直观的展现出template配合vue的使用
