Add class dynamic trong Vue - Section 2

Thời gian đọc: 3 phút

Chào các bạn đến với phần cuối cùng ở section 2 trong series VueJs của Wolfactive tụi mình. Ở phần cuối này, chúng ta sẽ tìm hiểu về add class dynamic trong Vue.

1/ Chuẩn bị

Đầu tiên các bạn cần phải download source tại đây nhé. Sau đó chúng ta cùng nhìn qua file html nhé:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vue Basics</title>
  <link href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="styles.css" />
  <script src="https://unpkg.com/vue@next" defer></script>
  <script src="app.js" defer></script>
</head>

<body>
  <header>
    <h1>Vue Dynamic Styling</h1>
  </header>
  <section id="styling">
    <div class="demo" :class="hoverBlockAClass" @click="hoverBlock('A')"></div>
    <div class="demo" :class="hoverBlockBClass" @click="hoverBlock('B')"></div>
    <div class="demo" :class="hoverBlockCClass" @click="hoverBlock('C')"></div>
  </section>
</body>

</html>

file js sau khi setup:

Vue.createApp({
    data(){
        return {
        }
    },
    computed:{
    },
    methods:{
    }
}).mount('#styling');

Okie, giờ ta bắt tay vào làm thôi nhỉ?
2/ Dynamic Styling Inline
Đầu tiên ta sẽ bắt đầu làm quen với style inline nhé. Trước hết, mình sẽ bắt đầu tạo 3 value trong data và tạo method xử lí khi ta click vào:

data(){
        return {
            elementBlockA : false,
            elementBlockB : false,
            elementBlockC : false,
        }
},
methods:{
        elementBlockSelect(block){
            if(block == 'A'){
                this.elementBlockA = !this.elementBlockA;
            } else if(block == 'B'){
                this.elementBlockB = !this.elementBlockB;
            } else if(block == 'C'){
                this.elementBlockC = !this.elementBlockC;
            }
        }
}

Và sau đó mình check value của từng elementBlock để render ra style inline bằng cách sử dụng v-bind và kết hợp điều kiện (conditions) trong đó như sau:

<section id="styling">
    <div class="demo" :style="{borderColor: elementBlockA ? 'red' : ''}" @click="elementBlockSelect('A')"></div>
    <div class="demo" :style="{borderColor: elementBlockB ? 'red' : ''}" @click="elementBlockSelect('B')"></div>
    <div class="demo" :style="{borderColor: elementBlockC ? 'red' : ''}" @click="elementBlockSelect('C')"></div>
  </section>

Và đây là kết quả khi các bạn click vào. Vậy là xong phần style inline rồi.

Tuy nhiên thông thường để có một website tốt về mọi điểm. Thì ta thường tránh trường hợp style inline nhiều nhất có thể. Bên cạnh đó, nếu chúng ta sử dụng style inline như vậy, thì sẽ rất khó khăn nếu ta muốn sử dụng nhiều attribute trong css. Do đó, bây giờ mình sẽ chỉ các bạn cách add class dynamic nhé.

2/ Add class dynamic

cũng tương tự như chúng ta add dynamic style inline, thì thay vì chúng ta sử dụng v-bind vào style, thì ta sẽ v-bind vào class.

<section id="styling">
    <div class="demo" :class="{active: elementBlockA}" @click="elementBlockSelect('A')"></div>
    <div :class="{demo: true, active: elementBlockB}"  @click="elementBlockSelect('B')"></div>
    <div class="demo" :class="{active: elementBlockC}"  @click="elementBlockSelect('C')"></div>
  </section>

Các bạn có thể thấy, ở đây mình viết 2 cách viết add class dynamic khác nhau. Tuy nhiên cả hai cách đều có ý nghĩa như nhau là class demo sẽ là class mặc định của chúng ta. Và khi nào value của elementBlockA,B,C là true, thì class active sẽ xuất hiện.

3/ Add class with array syntax

Và đây cũng là thêm một cách nữa đối với việc add class dynamic với array. Syntax cũng khá đơn giản.

<div :class="['demo',{active: elementBlockC}]"  @click="elementBlockSelect('C')"></div>

4/ Add class với computed

Đầu tiên mình sẽ tạo một methods trong computed với giá trị trả về như bên dưới

computed:{
        elementBlockAClass(){
            return {active : this.elementBlockA};
        }
    },

Cuối cùng mình sẽ đưa method trong comupted vào class

<div class="demo" :class="elementBlockAClass" @click="elementBlockSelect('A')"></div>

5/ Tổng kết:

Như vậy mình đã giới thiệu cho các bạn bằng cách add styling dynamic với vue. Bên cạnh đó thì chúng ta cũng vừa hoàn thành section 2 rồi. Tổng kết section 2 chúng ta đã học được bao gồm

DOM & Templates	Data & Event Bindings
Vue cho phép chúng ta xác định element, thay vì ta phải khai báo từng bước bằng cách DOM tới	Bạn có thể bind data bằng phép nội suy (interpolation) "{{}}" hoặc v-bind (":")
Kết nối vue với html bằng "mount"	Lắng nghe sự kiện từ element qua v-on (@)

Reactivity	Styling
Vue sẽ update lại template cho chúng ta khi có data thay đổi	Dynamic Css class và inline style bindings được support bởi vue
Computed và watcher cho phép ta chỉ thay đổi data ngay tại vị trí data đó thay đổi mà không reactivity toàn bộ template	Vue cung cấp cho ta nhiều loại syntax đặc biệt như object, array