详解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中的自定义指令
Dec 07 Vue.js
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
vue+element UI实现树形表格
Dec 29 Vue.js
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
vue-router懒加载的3种方式汇总
Feb 28 Vue.js
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
vue-element-admin项目导入和导出的实现
May 21 Vue.js
vue封装数字翻牌器
Apr 20 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
最小化数据传输――在客户端存储数据
2006/10/09 PHP
php中substr()函数参数说明及用法实例
2014/11/15 PHP
使用XHProf查找PHP性能瓶颈的实例
2017/12/13 PHP
JavaScript Timer实现代码
2010/02/17 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
2014/03/12 Javascript
基于jQuery创建鼠标悬停效果的方法
2015/03/07 Javascript
JavaScript字符串删除重复字符的方法
2015/12/25 Javascript
AngularJS转换响应内容
2016/01/27 Javascript
AngularJS删除路由中的#符号的方法
2016/09/20 Javascript
JS求解三元一次方程组值的方法
2017/01/03 Javascript
js 作用域和变量详解
2017/02/16 Javascript
JS仿淘宝搜索框用户输入事件的实现
2017/06/19 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
2017/07/02 Javascript
Node.js使用gm拼装sprite图片
2017/07/04 Javascript
浅谈js中的this问题
2017/08/31 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
2017/09/05 Javascript
JS实现的透明度渐变动画效果示例
2018/04/28 Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
2018/09/04 Javascript
vue构建动态表单的方法示例
2018/09/22 Javascript
[54:10]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
[01:05:07]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第一场2月1日
2021/03/11 DOTA
Python中的MongoDB基本操作:连接、查询实例
2015/02/13 Python
Python比较两个图片相似度的方法
2015/03/13 Python
python控制台中实现进度条功能
2015/11/10 Python
Python中在for循环中嵌套使用if和else语句的技巧
2016/06/20 Python
python中hashlib模块用法示例
2017/10/30 Python
python网络编程:socketserver的基本使用方法实例分析
2020/04/09 Python
Pytorch使用PIL和Numpy将单张图片转为Pytorch张量方式
2020/05/25 Python
python 两种方法删除空文件夹
2020/09/29 Python
Python Sqlalchemy如何实现select for update
2020/10/12 Python
史蒂夫·马登加拿大官网:Steve Madden加拿大
2017/11/18 全球购物
幼儿运动会邀请函
2014/01/17 职场文书
2016年“节能宣传周”活动总结
2016/04/05 职场文书
教你使用Pandas直接核算Excel中快递费用
2021/05/12 Python
Python 数据可视化工具 Pyecharts 安装及应用
2022/04/20 Python