template标签用法(含vue)
1、h5中的template标签
html中的template标签中的内容在页面中不会显示。但是在后台查看页面DOM结构存在template标签。这是因为template原本是不可见的,它设置了display:none属性。
<!--显示"abc"这个内容,不显示"template",这是因为template标签天生不可见-->
<template><div>template</div></template>
<abc>abc</abc>
2、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>
3、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、v-else-if、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中定义的数据。