Phần tử Vue <template>
Ví dụ
Sử dụng phần tử <template> tích hợp để chuyển đổi một phần mã HTML bằng lệnh v-if .
<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>
Chạy Ví dụ »Định nghĩa và cách sử dụng
Thẻ HTML <template> trở thành phần tử Vue <template> tích hợp khi được sử dụng với các lệnh Vue v-if , v-else-if , v-else , v-for hoặc v-slot .
Khi được sử dụng với v-if , v-else-if , v-else hoặc v-for , phần tử <template> tích hợp sẽ hiển thị một phần mã HTML.
Khi được sử dụng với v-slot , phần tử <template> tích hợp sẽ hướng một phần mã HTML đến một vị trí được chỉ định. Xem ví dụ 1 bên dưới.
Bản thân phần tử <template> tích hợp không được hiển thị dưới dạng phần tử DOM.
Lưu ý: Phần tử <template> cấp cao nhất là yêu cầu về cấu trúc khi sử dụng tệp SFC (*.vue). Đối với các phần tử <template> cấp cao nhất như vậy, không thể sử dụng lệnh Vue.
Thêm ví dụ
ví dụ 1
Sử dụng phần tử <template> tích hợp để đóng gói nhiều phần tử và gửi chúng đến một vị trí được đặt tên cụ thể bằng chỉ thị 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>
Chạy Ví dụ »Ví dụ 2
Khi sử dụng phần tử <template> , nhiều phần tử có thể được hiển thị bằng lệnh v-if .
<div id="app">
<template v-if="text.includes('pizza')">
<p>The text includes the word 'pizza'</p>
<img src="img_pizza.svg">
</template>
<p v-else>The word 'pizza' is not found in the text</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>
Hãy tự mình thử »Trang liên quan
Hướng dẫn Vue: Vue v-slot
Hướng dẫn Vue: Mẫu Vue
Hướng dẫn Vue: Chỉ thị Vue v-if
Tham khảo Vue: Chỉ thị Vue v-if
Tham khảo Vue: Chỉ thị Vue v-slot
Tham chiếu HTML: Thẻ HTML <template>
