铁雪资源网 Design By www.gsvan.com
一、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 = 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
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="/UploadFiles/2021-04-02/vue.js">注意: 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"> <!--此时页面上显示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="/UploadFiles/2021-04-02/vue.js">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="/UploadFiles/2021-04-02/vue.js">上面的例子中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="/UploadFiles/2021-04-02/vue.js">铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com
暂无详解template标签用法(含vue中的用法总结)的评论...