Chỉ thị Vue v-else-if
Ví dụ
Sử dụng lệnh v-else-if để tạo phần tử <div> nếu điều kiện là 'true'.
<div v-if="word === 'apple'">
<img src="/img_apple.svg" alt="apple" />
<p>The value of the 'word' property is 'apple'.</p>
</div>
<div v-else-if="word === 'pizza'">
<img src="/img_pizza.svg" alt="pizza" />
<p>The value of the 'word' property is '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-if được sử dụng để hiển thị một phần tử có điều kiện.
Lệnh v-else-if chỉ có thể được sử dụng sau một phần tử có v-if hoặc sau một phần tử khác có v-else-if .
Khi v-else-if được sử dụng trên một phần tử, nó phải được theo sau bởi một biểu thức:
- Nếu biểu thức được đánh giá là 'true' thì phần tử và tất cả nội dung của nó sẽ được tạo trong DOM.
- Nếu biểu thức đánh giá là 'false' thì phần tử sẽ bị hủy.
Khi một phần tử được chuyển đổi bằng cách sử dụng v-else-if :
- 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-if để viết "Còn rất ít!" trường hợp trong kho chỉ còn 1, 2 hoặc 3 máy đánh chữ.
<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-if để hiển thị một văn bản và hình ảnh nhất định nếu câu có chứa '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 taco, pizza, Thai beef salad, pho soup and tagine.'
}
}
})
app.mount('#app')
</script>
Hãy tự mình thử »Ví dụ 3
Sử dụng chuỗi v-else-if để lướt qua các hình ảnh, sử dụng thành phần <Transition> để tạo hoạt ảnh.
App.vue :
<template>
<h1>mode="out-in"</h1>
<p>Click the button to get a new image.</p>
<p>With mode="out-in", the next image is not added until the current image is removed. Another difference from the previous example, is that here we use computed prop instead of a method.</p>
<button @click="indexNbr++">Next image</button><br>
<Transition mode="out-in">
<img src="/img_pizza.svg" v-if="imgActive === 'pizza'">
<img src="/img_apple.svg" v-else-if="imgActive === 'apple'">
<img src="/img_cake.svg" v-else-if="imgActive === 'cake'">
<img src="/img_fish.svg" v-else-if="imgActive === 'fish'">
<img src="/img_rice.svg" v-else-if="imgActive === 'rice'">
</Transition>
</template>
<script>
export default {
data() {
return {
imgs: ['pizza', 'apple', 'cake', 'fish', 'rice'],
indexNbr: 0
}
},
computed: {
imgActive() {
if(this.indexNbr >= this.imgs.length) {
this.indexNbr = 0;
}
return this.imgs[this.indexNbr];
}
}
}
</script>
<style scoped>
.v-enter-active {
animation: swirlAdded 0.7s;
}
.v-leave-active {
animation: swirlAdded 0.7s reverse;
}
@keyframes swirlAdded {
from {
opacity: 0;
rotate: 0;
scale: 0.1;
}
to {
opacity: 1;
rotate: 360deg;
scale: 1;
}
}
img {
width: 100px;
margin: 20px;
}
img:hover {
cursor: pointer;
}
</style>
Chạy ví dụ »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
Hướng dẫn Vue: Hoạt hình Vue
Hướng dẫn về Vue: Móc vòng đời của Vue
