关于template标签用法总结(含vue中的用法总结)

2023-08-14 03:40| 来源: 网络整理| 查看: 265

文章目录一、html5中的template标签二、template标签操作的属性和方法三、vue中的template1、template标签在vue实例绑定的元素内部2、vue实例中的template属性

一、html5中的template标签

html中的template标签中的内容在页面中不会显示。但是在后台查看页面DOM结构存在template标签。这是因为template标签天生不可见，它设置了display:none;属性。

我是template 我是自定义表现abc 二、template标签操作的属性和方法 content属性:在js中template标签对应的dom对象存在content属性，对应的属性值是一个dom节点，节点的nodeName是#document-fragment。通过该属性可以获取template标签中的内容，template对象.content可以调用getElementById、querySelector、querySelectorAll方法来获取里面的子节点。innerHTML:可以获取template标签中的html。我是template 我是template 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"));//我是template console.log(o.innerHTML);//'我是template我是template' 三、vue中的template 1、template标签在vue实例绑定的元素内部

它是可以显示template标签中的内容，但是查看后台的dom结构不存在template标签。如果template标签不放在vue实例绑定的元素内部默认里面的内容不能显示在页面上，但是查看后台dom结构存在template标签。

我是template 我是template 我是template 我是template let vm = new Vue({ el: "#app", });

注意： vue实例绑定的元素内部的template标签不支持v-show指令，即v-show="false"对template标签来说不起作用。但是此时的template标签支持v-if、v-else-if、v-else、v-for这些指令。

我是template 我是template 我是template 我是template 我是template 我是template let vm = new Vue({ el: "#app", }); 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中定义的数据。 {{msg}} 111 let vm = new Vue({ el:"#app", data:{ msg:"hello", flag:true }, template:"#first"//通过该属性可以将自定义的template属性中的内容全部替换app的内容，并且会覆盖里面原有的内容，并且在查看dom结构时没有template标签 });

上面的例子中html中的template标签可以变成自定的标签，如下。但是下面这种方式也可以将标签中的内容替换掉app元素，但是标签中的内容也会显示在页面上。所以此处利用template标签来定义vue实例中需要设置的template属性。

{{msg}} 111

上面的实例还可以写成下面的形式

let vm = new Vue({ el:"#app", data:{ msg:"hello", flag:true }, template:"{{msg}}123"//模板中只能有一个根元素，如果有多个需要使用v-if、v-else、v-else-if来选择显示哪一个 });

【本文地址】

公司简介

联系我们