[Series-Vue-06] – Conditional Rendering – Điều kiện trong VueJS

Mở đầu

Conditional Rendering là một yếu tố quan trọng, quyết định dữ liệu có được hiển thị hay không. Vue JS sử dụng v-if và v-show để thể hiện cho điều này. Nào ! Giờ hãy cùng tìm hiểu.

v-if, v-else, v-else-if

Trong VueJS ta sẽ sử dụng directive v-if như sau:

<h1 v-if="ok">Yes</h1>

và cấu trúc đầy đủ sẽ bao gồm v-else và v-else-if :

<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>

Hiểu đơn giản nó như vậy thôi, giá trị trả về là true thì nó hiển thị (hoặc ẩn), false thì ngược lại. Tùy thuộc vào mục đích code và cách đặt data như thế nào.

v-show

v-show cũng hoạt động tương tự, giống như v-if, nếu giá trị true thì dữ liệu show ra, còn lại thì ẩn đi.

<h1 v-show="ok">Hello!</h1>

Ví dụ cho dễ hiểu hơn nhé

Mình vẫn dùng lại cấu trúc code của các bài trước, ở file index.html các bạn viết đoạn như sau, tạo một event v-on:click="changeFlag", kèm theo đó là một thẻ <p></p> với directive v-if="flag".

<div id="app">
    <button type="button" v-on:click="changeFlag" class="btn btn-primary">Click</button>
    <hr>
    <p v-if="flag">{{ title }}</p>
</div>

Ở file app.js, khai báo 2 data là title và flag, viết một methods changeFlag()với chức nhiệm vụ đổi giá trị của data flag = false.

var app = new Vue({
    el: "#app",
    data() {
        return {
            title : 'Hello World',
            flag : true
        }
    },
    methods : {
        changeFlag() {
            this.flag = false
        }
    }
});

Khi đó ta sẽ có một button click vào dữ liệu data title có giá trị là Hello World

Bây giờ hãy thử ấn Click xem nào ! Dòng chữ Hello World sẽ mất đi. Bởi vì lúc này function changeFlag() đã đổi giá trị của flag = false. Mà ở html ta check v-if="flag" tức là flag = true thì mới hiển thị.

Nếu ta thay bằng v-show="flag" thì chức năng cũng tương tự, nhưng có 1 sự khác nhau giữa v-if và v-show.

• v-if thì DOM sẽ được render và hiển thị ra theo điều kiện true hoặc false.
• v-show thì DOM vẫn được render ra, còn hiển thị hay không là do thuộc tính display.

Bây giờ hãy ấn F12 để theo dõi phần tử HTML hoạt động như thế nào nhé.

Đối với v-if, bây giờ hãy ấn Click, phần tử <p>Hello World</p> sẽ biến mất luôn hoàn toàn.

Nhưng đối với v-show, khi ta ấn Click thì thẻ <p> sẽ được add thêm css display:none

Vậy là sao ! Thực chất khi sử dụng v-show thì dữ liệu vẫn tồn tại, chỉ là nó ẩn đi không cho hiển thị ra. Còn với v-if, dữ liệu DOM bị mất hoàn toàn, không hiển thị. Mình đã từng gặp vấn đề này khi sử dụng highchart.js, lúc render biểu đồ ra nó không tìm thấy phần tử id hoặc class nên nó báo lỗi (do mình để v-if, về sau sửa v-show là ok).