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. Django（五）框架之模板继承和静态文件配置

    https://www.cnblogs.com/haiyan123/p/7731959.html 一.模板继承 目的是:减少代码的冗余 语法: {% block classinfo %} {% end ...

  2. 第五篇-以显式意图（Explicit Intent)跳往其它Activity

    此项目基于第四篇. Intent(意图) Explicit Intent(显式意图): 清楚指明需要前往的Activity的名称 用于APP内部的连接 Inplicit Intent(隐式意图): 不 ...

  3. 斯坦福大学公开课机器学习：machine learning system design | error metrics for skewed classes（偏斜类问题的定义以及针对偏斜类问题的评估度量值：查准率（precision）和召回率（recall））

    上篇文章提到了误差分析以及设定误差度量值的重要性.那就是设定某个实数来评估学习算法并衡量它的表现.有了算法的评估和误差度量值,有一件重要的事情要注意,就是使用一个合适的误差度量值,有时会对学习算法造成 ...

  4. Xml二（解析思想）、

    XML解析: * 解析xml可以做: * 如果xml作为配置文件:读取 * 如果xml作为传输文件:写,读 * xml解析思想: * DOM:将文档加载进内存,形成一颗dom树(document对象) ...

  5. python自动化开发-[第十一天]-Mysql

    今日概要: 1.初识mysql 2.MySQL的增删改查 3.主键.外键 4.组合和分组 一.数据库的由来 1.什么是数据库? 数据的仓库,在ATM,购物车中存储数据为目录,称为数据库 1.数据以表格 ...

  6. python csv与字典操作

    # encoding: utf-8 import csv d1 = {'banana':3,'apple':4,'pear':1,'orange':2} d2 = {'banana':3,'orang ...

  7. 3.Zuul-过滤器

    1.什么是Zuul? 路由+过滤器=Zuul,核心是一系列的过滤器 2.Zuul的过滤器: pre:可以在请求被路由之前调用 route:在路由请求时候被调用 post:在route和error过滤器 ...

  8. ELASTICSEARCH 搜索的评分机制

    从我们在elasticsearch复合框输入搜索语句到结果显示,展现给我们的是一个按score得分从高到底排好序的结果集.下面就来学习下elasticsearch怎样计算得分. Lucene(或 El ...

  9. Java方向如何准备技术面试答案(汇总版)

    本文转载自:"Java团长"公众号 1.面向对象和面向过程的区别 面向过程优点:性能比面向对象高,因为类调用时需要实例化,开销比较大,比较消耗资源;比如单片机.嵌入式开发.Linu ...

  10. 我的长大app开发教程第三弹：实现四个子页面绑定RadioButton

    在开始之前先上一张图 在上一节中我们实现了底部Button,这一弹我们要实现点击四个按钮分别切换到不同页面,我们可以把页面分为两部分,顶部栏和中间内容部分,我们可以通过线性布局包裹两部分内容,顶部栏又 ...