快活林资源网 Design By www.csstdc.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.csstdc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
快活林资源网 Design By www.csstdc.com
暂无评论...
更新日志
2024年05月17日
2024年05月17日
- SALLY李莎丽《EASTERN YOUTH》[320K/MP3][14.49MB]
- 原音母版1:1直刻《民谣精逊[低速原抓WAV+CUE]
- 原音母版1:1直刻《卓依婷精选集》[低速原抓WAV+CUE]
- 【佛之吧沙发】VA-BuddhaBar-BestOf2byRavin(FLAC)
- [ABC唱片]-《雪莉—蓝》[SACD-008][SACD][WAV+CUE]
- 黎瑞恩.2002-理想的日子精选2CD【环球】【WAV+CUE】
- 【驰放沙发(J)】VA-2024-WinterTime,Vol.12(FLAC)
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 韩红《青藏高原+红+韩红精选集》3CD[WAV分轨][1.7G]
- 高胜美《经典金选》1991-1994 4CD[WAV整轨][1.9G]
- 【迷幻电音】AstralWaves-2023-Singles,RemixesandRaritiesII(FLAC)
- 中唱唱片群星《好歌珍藏-游子情深》2CDWAV
- 张国荣.2011-极品天碟LPCD45II(雨果版)【环球】【WAV+CUE】
- 张学友《醒着做梦》[DFF][1.1G]
- 刘惜君 《如我》[WAV分轨][403M]