vue学习之template标签

时间 2020-05-22

标签 vue 学习 template 标签繁體版

原文原文链接

HTML5提供的新标签，具备如下特性：html

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

二、位置任意，能够在<head>中，也能够在<body>或者<frameset>中。ide

三、获取template.childNodes是空，想获取里面的伪子元素，使用template.content，会返回一个文档片断，你能够理解为另一个document，而后，使用document下的一些查询API。如：ui

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

<template>进行条件渲染spa

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

<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>

参考文章：htm

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