Chỉ thị Vue v-else
Ví dụ
Sử dụng lệnh v-else
để tạo phần tử <div>
khi tất cả các điều kiện trên là 'false'.
<p v-if="word === 'apple'">The word is 'apple'.</p>
<p v-else-if="word === 'pizza'">The word is 'pizza'</p>
<div v-else>
<img src="/img_question.svg" alt="question mark">
<p>The word is not 'apple', and it is not 'pizza'</p>
</div>
Chạy ví dụ »Xem thêm ví dụ dưới đây.
Định nghĩa và cách sử dụng
Lệnh v-else
được sử dụng để hiển thị một phần tử trong trường hợp tất cả các điều kiện ở trên trong câu lệnh if được đánh giá là 'false'.
Lệnh v-else
chỉ có thể được sử dụng sau một phần tử có v-if
hoặc v-else-if
.
Lệnh v-else
được sử dụng mà không có biểu thức.
Khi v-else
khiến một phần tử chuyển đổi:
- Chúng ta có thể sử dụng thành phần
<Transition>
tích hợp sẵn để tạo hiệu ứng động khi phần tử đi vào và rời khỏi DOM. - Các móc vòng đời như 'được gắn' và 'không được gắn' được kích hoạt.
Chỉ thị về kết xuất có điều kiện
Tổng quan này mô tả cách sử dụng cùng nhau các lệnh Vue khác nhau được sử dụng để hiển thị có điều kiện.
chỉ thị | Chi tiết |
---|---|
v-if | Có thể được sử dụng một mình hoặc với v-else-if và/hoặc v-else . Nếu điều kiện bên trong v-if là 'true' thì v-else-if hoặc v-else không được xem xét. |
v-else-if | Phải được sử dụng sau v-if hoặc v-else-if khác. Nếu điều kiện bên trong v-else-if là 'true' thì v-else-if hoặc v-else theo sau không được xem xét. |
v-else | Phần này sẽ xảy ra nếu phần đầu tiên của câu lệnh if sai. Phải được đặt ở cuối câu lệnh if, sau v-if và v-else-if . |
Thêm ví dụ
ví dụ 1
Sử dụng v-else
để viết "Không có hàng" khi số máy đánh chữ bằng 0.
<p v-if="typewriterCount>3">
In stock
</p>
<p v-else-if="typewriterCount>0">
Very few left!
</p>
<p v-else>
Not in stock
</p>
Hãy tự mình thử »Ví dụ 2
Sử dụng v-else
để hiển thị một văn bản nhất định khi câu không chứa 'pizza' hoặc 'burrito'.
<div id="app">
<div v-if="text.includes('pizza')">
<p>The text includes the word 'pizza'</p>
<img src="img_pizza.svg">
</div>
<div v-else-if="text.includes('burrito')">
<p>The text includes the word 'burrito', but not 'pizza'</p>
<img src="img_burrito.svg">
</div>
<p v-else>The words 'pizza' or 'burrito' are 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 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: Chỉ thị Vue v-if
Tham khảo Vue: Chỉ thị Vue v-if
Tham khảo Vue: Chỉ thị Vue v-else-if
Hướng dẫn Vue: Hoạt hình Vue
Hướng dẫn về Vue: Móc vòng đời của Vue