vue学习之template标签

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>标签的详细介绍

 

posted @ 2019-02-17 00:48  中二的羊  阅读(5312)  评论(0编辑  收藏  举报