vue template html属性,详解template标签用法(含vue中的用法总结)
一、html5中的template标签
html中的template标签中的内容在页面中不会显示。但是在后台查看页面DOM结构存在template标签。这是因为template标签天生不可见，它设置了display:none;属性。
我是自定义表现abc
二、template标签操作的属性和方法
content属性:在js中template标签对应的dom对象存在content属性，对应的属性值是一个dom节点，节点的nodeName是#document-fragment。通过该属性可以获取template标签中的内容，template对象.content可以调用getElementById、querySelector、querySelectorAll方法来获取里面的子节点。
innerHTML:可以获取template标签中的html。
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"));//
console.log(o.innerHTML);//"
"
三、vue中的template
1、template标签在vue实例绑定的元素内部
它是可以显示template标签中的内容，但是查看后台的dom结构不存在template标签。如果template标签不放在vue实例绑定的元素内部默认里面的内容不能显示在页面上，但是查看后台dom结构存在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这些指令。
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中定义的数据。
let vm = new Vue({
el:"#app",
data:{
msg:"hello",
flag:true
},
template:"#first"//通过该属性可以将自定义的template属性中的内容全部替换app的内容，并且会覆盖里面原有的内容，并且在查看dom结构时没有template标签
});
上面的例子中html中的template标签可以变成自定的标签，如下。但是下面这种方式也可以将标签中的内容替换掉app元素，但是标签中的内容也会显示在页面上。所以此处利用template标签来定义vue实例中需要设置的template属性。
上面的实例还可以写成下面的形式
let vm = new Vue({
el:"#app",
data:{
msg:"hello",
flag:true
},
template:"
"//模板中只能有一个根元素，如果有多个需要使用v-if、v-else、v-else-if来选择显示哪一个
});
到此这篇关于详解template标签用法(含vue中的用法总结)的文章就介绍到这了,更多相关template标签用法内容请搜索云海天教程以前的文章或继续浏览下面的相关文章希望大家以后多多支持云海天教程！
vue template html属性,详解template标签用法(含vue中的用法总结)相关推荐
- mixins php,vue的mixins属性详解
这篇文章主要介绍了vue的mixins属性详解,现在分享给大家,也给大家做个参考. 首先先给出官网 https://vuejs.org/v2/guide/mixins.html 今天在开发项目的时候要 ...
- Vue项目使用symbol的方式引入svg图标和svg path大法d属性详解，section标签
symbol标签 svg path大法d属性详解 section标签
- Vue 中的 ref 属性详解
Vue 中的 ref 属性详解 我们先来读一下vue的官方文档 我们来分析官方文档 首先ref的引用是相当于一个DOM节点(如果是子组件则指向的是其实例),而且是一个string类型的值. 通俗的将就 ...
- html frameset 属性,html frameset标签怎么用？html frameset标签属性详解
html frameset标签怎么用?html frameset标签属性详解,本篇文章主要讲述了html frameset标签的定义和用法,还有html frameset标签两个属性的用途(附实例) ...
- php中li标签,li标签有哪些属性？css中li标签的属性详解
在html中,我们经常会遇到li标签,那么li标签有哪些属性?下面我们来了解一下css中li标签的属性. 一:标签有哪些属性 在html中,使用css中li标签来控制样式,很多网站上都是点为开头,也有 ...
- audio标签的controls属性_HTML5教程 audio标签属性详解
本篇教程探讨了HTML5教程 audio标签属性详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < src:String型,所播放音频的 url. auto ...
- vue如何过滤html标签,Vue过滤器filters使用详解
这次给大家带来Vue过滤器filters使用详解,Vue过滤器filters使用的注意事项有哪些,下面就是实战案例,一起来看一下. 示例代码 采用vue单文件组件,使用moment插件格式化日期 {{ ...
- html5中preload是什么意思,html的video标签的preload属性详解
--------------------------------------------------------- Ta 只分享的内容开始 ------------------------------ ...
- HTML embed标签使用方法和属性详解
HTML embed标签使用方法和属性详解 一.基本语法 代码如下: embed src=url 说明:embed可以用来插入各种多媒体,格式可以是 Midi.Wav.AIFF.AU.MP3等等,Ne ...
最新文章
- 2011年云计算发展趋势的五大预测
- 从PCB焊接角度谈画PCB图时应注意的问题
- Nginx禁止通过IP,未绑定域名访问服务器
- 如何在Spring Boot中玩转智能合约
- 函数||值传递||函数的常见样式||函数的声明||函数的分文件编写
- Python+Opencv实现自动化阅卷
- 【SDOI2017】硬币游戏【KMP】【概率期望】【高斯消元】
- Spring，REST，Ajax和CORS
- 程序逻辑上多一些提示
- 如何在Wireshark确定数据集？
- VMware16安装CentOS7.6虚拟机
- java搭建环境配置_JAVA开发环境的搭建（配置JAVA开发环境）
- httpclient案例一（调用识别接口）
- 帆软动态分页之嵌套自定义参数据选择行数分页
- 3月28日服务器维护,4月28日服务器例行维护公告
- fw313r手机登录_迅捷(FAST)fw313r路由器初始密码_登录密码是多少？-192路由网
- 谷歌创建用户：手机号码无法用于验证
- CSMA(carrier sense multiple access)
- 找字符串中最长单词C语言,C语言 在已知字符串中找最长单词
- 网络爬虫——爬取京东数据