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>
元素当做不可见的包裹元素,并在上面使用 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>
参考文章: