Chỉ thị Vue v-if
Ví dụ
Sử dụng lệnh v-if
để tạo phần tử <div>
nếu điều kiện là 'true'.
<div v-if="createImgDiv">
<img src="/img_apple.svg" alt="apple">
<p>This is an apple.</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-if
được sử dụng để hiển thị một phần tử có điều kiện.
Khi v-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 bật bằng cách sử dụng v-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.
Lưu ý: Không nên sử dụng v-if
và v-for
trên cùng một thẻ. Nếu cả hai lệnh được sử dụng trên cùng một thẻ, v-if
sẽ không có quyền truy cập vào các biến được sử dụng bởi v-for
, vì v-if
có mức độ ưu tiên cao hơn v-for
.
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-if
với thuộc tính dữ liệu làm biểu thức điều kiện, cùng với v-else
.
<p v-if="typewritersInStock">
in stock
</p>
<p v-else>
not in stock
</p>
Hãy tự mình thử »Ví dụ 2
Sử dụng v-if
với kiểm tra so sánh làm biểu thức điều kiện, cùng với v-else
.
<p v-if="typewriterCount > 0">
in stock
</p>
<p v-else>
not in stock
</p>
Hãy tự mình thử »Ví dụ 3
Sử dụng v-if
cùng với v-else-if
và v-else
để hiển thị thông báo trạng thái dựa trên số lượng máy đánh chữ trong bộ nhớ.
<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ụ 4
Sử dụng v-if
với phương thức JavaScript gốc làm biểu thức điều kiện, cùng với v-else
.
<div id="app">
<p v-if="text.includes('pizza')">The text includes the word 'pizza'</p>
<p v-else>The word 'pizza' is not found in the text</p>
</div>
data() {
return {
text: 'I like taco, pizza, Thai beef salad, pho soup and tagine.'
}
}
Hãy tự mình thử »Ví dụ 5
Sử dụng v-if
để hiển thị thẻ <div>
khi nhận dữ liệu từ API.
<template>
<h1>Example</h1>
<p>Click the button to fetch data with an HTTP request.</p>
<p>Each click generates an object with a random user from <a href="https://random-data-api.com/" target="_blank">https://random-data-api.com/</a>.</p>
<p>The robot avatars are lovingly delivered by <a href="https://Robohash.org" target="_blank">RoboHash</a>.</p>
<button @click="fetchData">Fetch data</button>
<div v-if="data" id="dataDiv">
<img :src="data.avatar" alt="avatar">
<pre>{{ data.first_name + " " + data.last_name }}</pre>
<p>"{{ data.employment.title }}"</p>
</div>
</template>
<script>
export default {
data() {
return {
data: null,
};
},
methods: {
async fetchData() {
const response = await fetch("https://random-data-api.com/api/v2/users");
this.data = await response.json();
},
}
};
</script>
<style>
#dataDiv {
width: 240px;
background-color: aquamarine;
border: solid black 1px;
margin-top: 10px;
padding: 10px;
}
#dataDiv > img {
width: 100%;
}
pre {
font-size: larger;
font-weight: bold;
}
</style>
Chạy ví dụ »Ví dụ 6
Sử dụng v-if
để tạo một thành phần nhằm kích hoạt móc vòng đời mounted
.
CompOne.vue
:
<template>
<h2>Component</h2>
<p>Right after this component is added to the DOM, the mounted() function is called and we can add code to that mounted() function. In this example, an alert popup box appears after this component is mounted.</p>
<p><strong>Note:</strong> The reason that the alert is visible before the component is visible is because the alert is called before the browser gets to render the component to the screen.</p>
</template>
<script>
export default {
mounted() {
alert("The component is mounted!");
}
}
</script>
App.vue
:
<template>
<h1>The 'mounted' Lifecycle Hook</h1>
<button @click="this.activeComp = !this.activeComp">Create component</button>
<div>
<comp-one v-if="activeComp"></comp-one>
</div>
</template>
<script>
export default {
data() {
return {
activeComp: false
}
}
}
</script>
<style scoped>
div {
border: dashed black 1px;
border-radius: 10px;
padding: 20px;
margin: 10px;
width: 400px;
background-color: lightgreen;
}
</style>
Chạy ví dụ »Ví dụ 7
Sử dụng v-if
để chuyển đổi phần tử <p>
để kích hoạt hoạt ảnh.
<template>
<h1>Add/Remove <p> Tag</h1>
<button @click="this.exists = !this.exists">{{btnText}}</button><br>
<Transition>
<p v-if="exists">Hello World!</p>
</Transition>
</template>
<script>
export default {
data() {
return {
exists: false
}
},
computed: {
btnText() {
if(this.exists) {
return 'Remove';
}
else {
return 'Add';
}
}
}
}
</script>
<style scoped>
.v-enter-from {
opacity: 0;
translate: -100px 0;
}
.v-enter-to {
opacity: 1;
translate: 0 0;
}
.v-leave-from {
opacity: 1;
translate: 0 0;
}
.v-leave-to {
opacity: 0;
translate: 100px 0;
}
p {
background-color: lightgreen;
display: inline-block;
padding: 10px;
transition: all 0.5s;
}
</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-else-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