Vue <template> 元素
示例
使用內建的 <template> 元素，透過 v-if 指令來切換 HTML 程式碼塊。
<ul>
<li>Trolltunga</li>
<template v-if="display">
<li>Potato Point</li>
<li>The souks of Marrakech</li>
<li>Dry Tortugas</li>
<li>Halong Bay</li>
</template>
<li>...</li>
</ul>
定義和用法
當與 Vue 的 v-if、v-else-if、v-else、v-for 或 v-slot 指令一起使用時，HTML 的 <template> 標籤會成為內建的 Vue <template> 元素。
當與 v-if、v-else-if、v-else 或 v-for 一起使用時，內建的 <template> 元素會渲染一個 HTML 程式碼塊。
當與 v-slot 一起使用時，內建的 <template> 元素會將一個 HTML 程式碼塊定向到一個指定的插槽。請參見下面的示例 1。
內建的 <template> 元素本身不會被渲染為 DOM 元素。
注意： 當使用 SFC（*.vue）檔案時，頂層 <template> 元素是結構要求。對於這種頂層的 <template> 元素，不能使用 Vue 指令。
更多示例
示例 1
使用內建的 <template> 元素封裝多個元素，並透過 v-slot 指令將它們傳送到特定的命名插槽。
<template>
<h1>App.vue</h1>
<p>The component has two div tags with one slot in each.</p>
<slot-comp>
<template v-slot:bottomSlot>
<h4>To the bottom slot!</h4>
<p>This p tag and the h4 tag above are directed to the bottom slot with the v-slot directive used on the template tag.</p>
</template>
<p>This goes into the default slot</p>
</slot-comp>
</template>
示例 2
使用 <template> 元素，可以使用 v-if 指令渲染多個元素。
<div id="app">
<template v-if="text.includes('pizza')">
<p>文字包含“pizza”一詞</p>
<img src="img_pizza.svg">
</template>
<p v-else>文字中未找到“pizza”一詞</p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
text: 'I like taco, pizza, Thai beef salad, pho soup and tagine.'
}
}
})
app.mount('#app')
</script>
自己動手試一試 »
相關頁面
Vue 教程：Vue v-slot
Vue 教程：Vue 模板
Vue 教程：Vue v-if 指令
Vue 參考：Vue v-if 指令
Vue 參考：Vue v-slot 指令
HTML 參考：HTML <template> 標籤
