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

相關標籤/搜索