HTML5提供的新标签，具有以下特性：

1、该元素天生display:none，同时模板元素内部内容也是隐藏的

2、位置任意，可以在<head>中，也可以在<body>或者<frameset>中。

3、获取template.childNodes是空，想获取里面的伪子元素，使用template.content，会返回一个文档片段，你可以理解为另外一个document，然后，使用document下的一些查询API。如：

var image_first = template.content.querySelector("img");

<template>进行条件渲染

如果想切换多个元素，此时可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。

<template v-if="loginType === 'username'">

  <label>Username</label>

  <input placeholder="Enter your username">

</template>

<template v-else>

  <label>Email</label>

  <input placeholder="Enter your email address">

</template>

参考文章：

HTML5中<template>标签的详细介绍

vue学习之template标签的更多相关文章

  1. Vue中的template标签的使用和在template标签上使用v-for

    我们知道  .vue 文件的基本结构是: <template> ........ </template> <script> export default { nam ...

  2. Vue学习笔记 template methods,filters,ChromeDriver,安装sass

    ChromeDriver installation failed Error with http(s) request: Error: connect ETIMEDOUT 172.217.160.80 ...

  3. *.vue文件的template标签内使用form标签

    由于form表单有重复提交的问题,所以在vue文件内直接使用form标签时需要注意这个问题,否则会导致页面重复刷新跳转不成功的问题 解决方案: <form @submit.prevent> ...

  4. Vue中在template标签中进行判断时注意比较元素

    (一)比较的元素,一个是data元素,另外一个是常量,如下图所示: 编译正常,运行正常,效果在期望中,会显示Hello World,结果如下: (二)比较的元素,一个是data元素,另外一个是cons ...

  5. vue template标签

    在普通的html里面: template标签默认有个 display:none; 属性,并且其里面的内容是不可见的. 在vue里面: template标签类似一个隐藏的div,在审查元素的时候是找不到 ...

  6. vue学习笔记(七)组件

    前言 在前面vue的一些博客中,我们几乎将vue的基础差不多学习完了,而从本篇博客开始将会进入到vue的另一个阶段性学习,本篇博客的内容在以后的vue项目中占很大的比重,所以小伙伴们需要认真学习,本篇 ...

  7. vue学习笔记（六） ----- vue组件

    一.模块化与组件化 模块化的定义 模块化在Node中是一个规范,定义一些模块的相关的规则,从代码角度上来说,方便做区别,如果不使用模块化,写在js文件中不利于后期维护和扩展,从代码的层面上就把相关的功 ...

  8. Vue学习笔记-2

    前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...

  9. Vue学习之路---No.7（分享心得，欢迎批评指正）

    老规矩,先回顾一下上回的重点: 1.对于input框,若为单选框,如果没有对其设置value,那么其checked的值将在true Or false之间切换:如果设置了value,那么将会切换valu ...

随机推荐

  1. Spring MVC 架构的java web工程如何添加登录过滤器

    发布到外网的web工程必须添加登录过滤器来阻挡一些非法的请求,即只有登录的用户才能对web工程进行请求,否则无论请求什么资源都需要调整到登录页面进行登录操作.这时就需要用到过滤器,其实非常简单,只需要 ...

  2. Xml一（基本语法和约束）、

    XML:eXtensible Markup Language 可扩展标记语言 version="1.0" * 可扩展:所有的标签都是自定义的. * 功能:数据存储 * 配置文件 * ...

  3. 编码标准：ASCII、GBK、Unicode（UTF8、UTF16、UTF32）

    英文编码(单字节字符集,码值范围0~127):字节最高位是0 ASCII编码,用于英文字符.中文编码(双字节字符集):首字节(8位)的最高位是1.可依据首字节最高位来判断中英文. GB2312, 旧版 ...

  4. 使用rdbtools工具来解析redis rdb文件

    工欲善其事必先利其器,日常工作中,好的工具能够高效的协助我们工作:今天介绍一款用来解析redis rdb文件的工具,非常好用.会之,受用无穷! 一.rdbtools工具介绍 源码地址:https:// ...

  5. aerospike数据库配置

    https://blog.csdn.net/u011344514/article/details/53082757

  6. MAC操作系统使用小技巧

    MAC操作系统使用小技巧   作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.修改主机名名称 1>.修改主机名称 修改和查询的Ulinx命令如下: sudo scutil ...

  7. Unity-使用面向对象的思想

    在做游戏之初,老师曾经说过要用面向对象的思想去做.当时满口答应,应为学了一点C#的原因感觉面向对象很简单嘛,但是事实上在做游戏的过程中,为了赶进度我的代码写的很冗余,很乱.这就导致了我不得不重新修改. ...

  8. HDFS 读写数据流程

    一.上传数据 二.下载数据 三.读写时的节点位置选择 1.网络节点距离(机架感知) 下图中: client 到 DN1 的距离为 4 client 到 NN 的距离为 3 DN1 到 DN2 的距离为 ...

  9. python 面向对象(经典作业讲解)

    #############################总结######################## # lst =['python%s期' %i for i in range(510)]# ...

  10. 利用spring的MultipartFile实现文件上传【原】

    利用spring的MultipartFile实现文件上传 主要依赖jar包 spring-web-3.0.6.RELEASE.jar 用到 (org.springframework.web.multi ...