Chỉ thị V-show
Ví dụ
Sử dụng lệnh v-show để chuyển đổi có điều kiện khả năng hiển thị của phần tử <div> , tùy thuộc vào giá trị của 'showDiv'.
<div v-show="showDiv">This div tag can be hidden</div> Hãy tự mình thử »Xem thêm ví dụ dưới đây.
Định nghĩa và cách sử dụng
Lệnh v-show được sử dụng để chuyển đổi có điều kiện khả năng hiển thị của một phần tử.
Khi biểu thức được v-show sử dụng có giá trị là 'false', thuộc tính CSS display được đặt thành 'none' và nếu không thì thuộc tính CSS display sẽ trở về giá trị mặc định.
Một phần tử có v-show được gắn kết một lần và vẫn còn trong DOM, chỉ khả năng hiển thị của nó được bật bằng v-show .
v-show kích hoạt các lớp và sự kiện chuyển tiếp khi được sử dụng với thành phần <Transition> tích hợp sẵn.
Các móc vòng đời như mounted / unmounted hoặc activated / deactivated không được kích hoạt khi chế độ hiển thị của một đối tượng được bật bằng v-show .
v-show so với v-if
Các lệnh v-show và v-if rõ ràng là khá giống nhau, bởi vì cả hai đều có thể chuyển đổi một phần tử để nó được hiển thị hoặc không, nhưng đây là một số khác biệt:
v-show |
v-if |
|
|---|---|---|
| Creates and destroys an element in the DOM when it is toggled? | no | yes |
Triggers lifecycle hooks mounted / unmounted when an element is toggled? |
no | yes |
Triggers transition events and classes for leaving and entering when used with the built-in <Transition> component? |
yes | yes |
Works with the built-in <template> element? |
no | yes |
Works with v-else-if and v-else ? |
no | yes |
Thêm ví dụ
Ví dụ
Các lệnh v-show và v-if được sử dụng song song để chuyển đổi có điều kiện khả năng hiển thị của phần tử <div> .
Mở ví dụ, đặt điều kiện thành 'false', sau đó nhấp chuột phải và kiểm tra trang để thấy rằng phần tử có v-show vẫn tồn tại trong DOM.
<div id="app">
<div v-show="showDiv">Div tag with v-show</div>
<div v-if="showDiv">Div tag with v-if</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
showDiv: true
}
}
})
app.mount('#app')
</script> Hãy tự mình thử »Ví dụ
Phần tử <p> hiển thị với v-show và kích hoạt sự kiện after-enter .
<template>
<h1>JavaScript Transition Hooks</h1>
<p>This code hooks into "after-enter" so that after the initial animation is done, a method runs that displays a red div.</p>
<button @click="pVisible=true">Create p-tag!</button><br>
<Transition @after-enter="onAfterEnter">
<p v-show="pVisible" id="p1">Hello World!</p>
</Transition>
<br>
<div v-show="divVisible">This appears after the "enter-active" phase of the transition.</div>
</template>
<script>
export default {
data() {
return {
pVisible: false,
divVisible: false
}
},
methods: {
onAfterEnter() {
this.divVisible = true;
}
}
}
</script>
<style scoped>
.v-enter-active {
animation: swirlAdded 1s;
}
@keyframes swirlAdded {
from {
opacity: 0;
rotate: 0;
scale: 0.1;
}
to {
opacity: 1;
rotate: 360deg;
scale: 1;
}
}
#p1, div {
display: inline-block;
padding: 10px;
border: dashed black 1px;
}
#p1 {
background-color: lightgreen;
}
div {
background-color: lightcoral;
}
</style>
Chạy ví dụ »Trang liên quan
Hướng dẫn Vue: Chỉ thị Vue v-show
Hướng dẫn Vue: Chỉ thị Vue v-if
Hướng dẫn Vue: Hoạt hình Vue
Tham khảo Vue: Thành phần Vue <Transition>
Tham khảo Vue: Chỉ thị Vue v-if
