详解template标签⽤法（含vue中的⽤法总结）
⽬录
⼀、html5中的template标签
⼆、template标签操作的属性和⽅法
三、vue中的template
1、template标签在vue实例绑定的元素内部
2、vue实例中的template属性
⼀、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 = ElementById("tem");
console.t.nodeName);//#document-fragment
console.t.querySelectorAll("div"));//NodeList(2) [div#div1, div]。得到⼀个类数组
console.t.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">
script在html中的用法<!--此时页⾯上显⽰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",
data:{
msg:"hello",
flag:true
},
template:"<div v-if='flag'>{{msg}}</div><div v-else>123</div>"//模板中只能有⼀个根元素，如果有多个需要使⽤v-if、v-else、v-else-if来选择显⽰哪⼀个 });
</script>
到此这篇关于详解template标签⽤法(含vue中的⽤法总结)的⽂章就介绍到这了，更多相关template标签⽤法内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。