个人中心
gpt4 book ai didi

详解template标签用法(含vue中的用法总结)

转载 作者：qq735679552 更新时间：2022-09-27 22:32:09 28 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章详解template标签用法(含vue中的用法总结)由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

1、html5中的template标签

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

?
1
2
3
<!--当前页面只显示 "我是自定义表现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。
?
1
2
3
4
5
6
7
8
9
10
11
<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标签.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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这些指令.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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中定义的数据。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!--此处页面显示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属性.

?
1
2
3
4
<abc id= "first" >
  <div v- if = "flag" >{{msg}}<div>
  <div v- else >111<div>
</abc>

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
<!--此处页面显示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标签用法内容请搜索我以前的文章或继续浏览下面的相关文章希望大家以后多多支持我！ 。

原文链接：https://blog.csdn.net/u010510187/article/details/100356624 。

最后此篇关于详解template标签用法(含vue中的用法总结)的文章就讲到这里了,如果你想了解更多关于详解template标签用法(含vue中的用法总结)的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

28 4 0
文章推荐： 8种主流NoSQL数据库系统特性对比和最佳应用场景
文章推荐： sql学习之CASE WHEN THEN ELSE END的用法
文章推荐： PyCharm插件开发实践之PyGetterAndSetter详解
文章推荐： SQL语句学习
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com