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


Posted in Vue.js onJanuary 12, 2021

一、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="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这些指令。

<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中定义的数据。
<!--此处页面显示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属性。

<abc id="first">
 <div v-if="flag">{{msg}}<div>
 <div v-else>111<div>
</abc>

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

<!--此处页面显示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标签用法内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
如何实现vue的tree组件
Dec 03 Vue.js
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
Vue实现随机验证码功能
Dec 29 Vue.js
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 Vue.js
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
解决vue-router的beforeRouteUpdate不能触发
Apr 14 Vue.js
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 #Vue.js
vue实现防抖的实例代码
Jan 11 #Vue.js
Vuex实现简单购物车
Jan 10 #Vue.js
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 #Vue.js
基于vuex实现购物车功能
Jan 10 #Vue.js
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 #Vue.js
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 #Vue.js
You might like
php 无限级缓存的类的扩展
2009/03/16 PHP
用php解析html的实现代码
2011/08/08 PHP
Laravel Memcached缓存驱动的配置与应用方法分析
2016/10/08 PHP
php使用array_chunk函数将一个数组分割成多个数组
2018/12/05 PHP
PHP实现计算器小功能
2020/08/28 PHP
ExtJS Grid使用SimpleStore、多选框的方法
2009/11/20 Javascript
JavaScript 利用StringBuffer类提升+=拼接字符串效率
2009/11/24 Javascript
JS分页效果示例
2013/10/11 Javascript
JavaScript中创建类/对象的几种方法总结
2013/11/29 Javascript
jQuery的:parent选择器定义和用法
2014/07/01 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
2015/05/06 Javascript
javascript实现动态导入js与css等静态资源文件的方法
2015/07/25 Javascript
学习使用AngularJS文件上传控件
2016/02/16 Javascript
JS中的==运算: [''] == false —&gt;true
2016/07/24 Javascript
简单理解Vue条件渲染
2016/12/03 Javascript
vue组件中使用iframe元素的示例代码
2017/12/13 Javascript
Angular实现的table表格排序功能完整示例
2017/12/22 Javascript
Angular6中使用Swiper的方法示例
2018/07/09 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
2019/04/13 Javascript
js中Function引用类型常见有用的方法和属性详解
2019/12/11 Javascript
跟老齐学Python之Python安装
2014/09/12 Python
python中使用正则表达式的连接符示例代码
2017/10/10 Python
Python语言描述随机梯度下降法
2018/01/04 Python
Python实现识别手写数字 简易图片存储管理系统
2018/01/29 Python
总结python中pass的作用
2019/02/27 Python
Python 改变数组类型为uint8的实现
2020/04/09 Python
将python字符串转化成长表达式的函数eval实例
2020/05/11 Python
用Python进行websocket接口测试
2020/10/16 Python
使用CSS3实现圆角,阴影,透明
2014/12/23 HTML / CSS
css3 中translate和transition的使用方法
2020/03/26 HTML / CSS
企业标语口号
2014/06/10 职场文书
银行主办会计岗位职责
2014/08/13 职场文书
教书育人演讲稿
2014/09/11 职场文书
2014年最新领导班子整改方案
2014/09/27 职场文书
婚宴邀请函
2015/01/30 职场文书
埃及王子观后感
2015/06/16 职场文书