详解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中使用transition和animation的实例代码
Dec 12 Vue.js
Vue-router中hash模式与history模式的区别详解
Dec 15 Vue.js
vue实现树状表格效果
Dec 29 Vue.js
vue 动态生成拓扑图的示例
Jan 03 Vue.js
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
Vue中插槽slot的使用方法与应用场景详析
Jun 08 Vue.js
vue3使用vuedraggable实现拖拽功能
Apr 06 Vue.js
vue实力踩坑之push当前页无效
Apr 10 Vue.js
vue项目打包后路由错误的解决方法
Apr 13 Vue.js
vue elementUI批量上传文件
Apr 26 Vue.js
vue使用watch监听属性变化
Apr 30 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 获取客户端真实IP地址多种方法小结
2010/05/15 PHP
php从右向左/从左向右截取字符串的实现方法
2011/11/28 PHP
解析PHP计算页面执行时间的实现代码
2013/06/18 PHP
php源码的安装方法和实例
2019/09/26 PHP
laravel按天、按小时,查询数据的实例
2019/10/09 PHP
IE中直接运行显示当前网页中的图片 推荐
2006/08/31 Javascript
取键盘键位ASCII码的网页
2007/07/30 Javascript
JQuery 操作Javascript对象和数组的工具函数小结
2010/01/22 Javascript
js实现addClass,removeClass,hasClass的函数代码
2011/07/13 Javascript
jQuery中scrollTop()方法用法实例
2015/01/16 Javascript
在jQuery中处理XML数据的大致方法
2015/08/14 Javascript
JavaScript基本语法学习教程
2016/01/14 Javascript
浅谈js中的延迟执行和定时执行
2016/05/31 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
jquery——九宫格大转盘抽奖实例
2017/01/16 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
2017/03/07 Javascript
Vue.js 60分钟快速入门教程
2017/03/28 Javascript
JavaScript队列的应用实例详解【经典数据结构】
2017/04/12 Javascript
vue2.0 路由模式mode=&quot;history&quot;的作用
2018/10/18 Javascript
详解vue项目中调用百度地图API使用方法
2019/04/25 Javascript
vue实现数字动态翻牌的效果(开箱即用)
2019/12/08 Javascript
通过python将大量文件按修改时间分类的方法
2018/10/17 Python
带有css3动画效果的兼容多浏览器简单导航条示例
2014/01/26 HTML / CSS
意大利奢侈品网站:Italist
2016/08/23 全球购物
美国时装品牌:Nautica(诺帝卡)
2016/08/28 全球购物
8和9的加减法教学反思
2014/05/01 职场文书
2014年生产部工作总结
2014/12/17 职场文书
鼋头渚导游词
2015/02/05 职场文书
清明节扫墓活动总结
2015/02/09 职场文书
网吧管理制度范本
2015/08/05 职场文书
《颐和园》教学反思
2016/02/19 职场文书
MySQL中distinct和count(*)的使用方法比较
2021/05/26 MySQL
SpringBoot快速入门详解
2021/07/21 Java/Android
实战 快速定位MySQL的慢SQL
2022/03/22 MySQL
vue3不同环境下实现配置代理
2022/05/25 Vue.js
MySQL中正则表达式(REGEXP)使用详解
2022/07/07 MySQL