CSS Classes Dynamically trong Vue.js cho phép bạn áp dụng và quản lý các classes CSS cho các phần tử DOM dựa trên dữ liệu động hoặc trạng thái của ứng dụng. Thay vì viết cứng các classes CSS vào trong mã HTML, bạn có thể sử dụng các biểu thức Vue để gán hoặc loại bỏ các classes theo các điều kiện nhất định.

Việc này mang lại sự linh hoạt và quản lý dễ dàng hơn cho việc thay đổi kiểu dáng và hiệu ứng của các phần tử trong ứng dụng Vue.js của bạn. Bạn có thể điều chỉnh kiểu dáng của các phần tử dựa trên sự kiện người dùng, trạng thái của ứng dụng hoặc dữ liệu động từ các biến Vue.

Trong đoạn giới thiệu này, chúng ta sẽ khám phá cách sử dụng CSS Classes Dynamically trong Vue.js và cách nó tạo ra một cách tiếp cận linh hoạt và mạnh mẽ cho việc quản lý kiểu CSS trong ứng dụng của bạn.

Mình sẽ lấy ví dụ ở bài trước thay vì chúng ta sử dụng Dynamic Styling with Inline Styles, chúng ta sẽ chuyển qua sử dụng Dynamic class, để sử dụng được bạn có thể sử dụng cú pháp v-bind:class hoặc viết tắt :class để liên kết một đối tượng Vue với các thuộc tính class.

Để thực hành được ví dụ này mình sẽ tạo ra một css riêng và đặt tên là "active" như bên dưới:

CSS:

.demo {
  width: calc(100% - 32px);
  height: 100px;
  margin: 16px;
  border: 2px dashed #ccc;
}

.active {
  background-color: salmon;
  border-color: red;
}

Vue:

const app = Vue.createApp({
    data() {
        return {
            selectedBoxA: false,
            selectedBoxB: false,
            selectedBoxC: false,
        }
    },
    methods: {
        selectBox(box) {
            if(box == 'A') {
                this.selectedBoxA = true;
            } else if(box == 'B') {
                this.selectedBoxB = true;
            } else if(box == 'C') {
                this.selectedBoxC = true;
            }
        }
    },
})
app.mount('#styling');

Chúng ta sử dụng v-bind:class hoặc :class để định nghĩa một class bằng cách thông thường như sau: Nó sẽ nhận vào một string nên chúng ta cần phải thêm 2 dấu nháy đơn.

 <div v-bind:class="'active demo'"></div>

Còn khi chúng ta sử dụng Classes Dynamically bằng các biến số trong Vue app thì ta sẽ làm như sau:

<section id="styling">
  <div @click="selectBox('A')" :class="selectedBoxA ? 'active demo' : 'demo'"></div>
  <div @click="selectBox('B')" :class="selectedBoxB ? 'active demo' : 'demo'"></div>
  <div @click="selectBox('C')" :class="selectedBoxC ? 'active demo' : 'demo'"></div>
</section>

Bên cạnh đó Vue cũng hỗ trợ chúng ta sử dụng đối tượng trong CSS class:

<section id="styling">
  <div @click="selectBox('A')" :class="{demo: true, active: selectedBoxA}"></div>
  ...
</section>

• :class="{demo: false, active: selectedBoxA}": Đây là một cú pháp Vue.js để áp dụng classes CSS động.

  • :class là một directive trong Vue.js được sử dụng để áp dụng classes CSS dựa trên dữ liệu động.

  • {} là một object literal trong JavaScript, được sử dụng để định nghĩa một đối tượng.

  • Trong object này, mỗi cặp key-value đại diện cho một class CSS mà chúng ta muốn áp dụng và điều kiện để quyết định xem class đó có nên được áp dụng hay không.

    • Trong trường hợp này, demo: false chỉ rằng class "demo" sẽ không được áp dụng vào phần tử này và ngược lại.

    • active: selectedBoxA nghĩa là class "active" sẽ được áp dụng vào phần tử này nếu biến selectedBoxA có giá trị là true.

Bên cạnh đó Vue còn hỗ trợ kiểu mảng các classes:

<section id="styling">
  ...
  <div @click="selectBox('B')" :class="['demo', {active: selectedBoxB}]"></div>
  ...
</section>

Trong trường hợp chúng ta có những class dùng MÀ KHÔNG cần điều kiện gì thì chúng ta có thể đặt nó ra ngoài:

<section id="styling">
  <div @click="selectBox('A')" class="demo" :class="{active: selectedBoxA}"></div>
  ...
</section>

Ok vậy là mình đã hướng dẫn cho các bạn có thể sử dụng CSS Classes Dynamically trong Vue rồi, trước khi sang phần khác mình muốn giới thiệu đến cho các bạn cách sử dụng Toggle một thuộc tính trong Vue.

Trong Vue.js, "toggle" một thuộc tính có nghĩa là chuyển đổi giá trị của thuộc tính giữa hai trạng thái, thường là giữa true và false, hoặc giữa hai giá trị khác nhau. Điều này thường được sử dụng để thay đổi trạng thái của một phần tử hoặc một tính năng trong ứng dụng dựa trên sự kiện hoặc tương tác của người dùng.

Các bạn có để ý trong đoạn code Vue bên dưới:

methods: {
    selectBox(box) {
        if(box == 'A') {
            this.selectedBoxA = true;
        } else if(box == 'B') {
            this.selectedBoxB = true;
        } else if(box == 'C') {
            this.selectedBoxC = true;
        }
    }
},

Khi chúng ta click vào box A thì selectedBoxA có giá trị là true và class "active" sẽ được thêm vào phần tử <div>, trong trường hợp chúng ta click vào box A một lần nữa thì  class "active" sẽ được loại bỏ phần tử <div> và giá trị của thuộc tính selectedBoxA sẽ là false.

Để làm được điều này thì chúng ta sẽ phải làm như thế nào? Rất đơn giản Vue đã hỗ trợ chúng ta làm điều này, chỉ cần thêm dấm chấm than (!) trước giá trị mà chúng ta muốn gán.

methods: {
    selectBox(box) {
        if(box == 'A') {
            this.selectedBoxA = !this.selectedBoxA;
        } else if(box == 'B') {
            this.selectedBoxB = !this.selectedBoxB;
        } else if(box == 'C') {
            this.selectedBoxC = !this.selectedBoxC;
        }
    }
},

Vậy là chúng ta đã sử dụng được Toggle để chuyển đổi giá trị của thuộc tính giữa hai trạng thái giữa true và false.

Các bạn đã bao giờ tự hỏi trong trường xứ lý với Classes Dynamically nhưng với một logic phức tạp để thêm một class hoặc giảm một class thì chúng ta nên xử lý ở đâu không? Chúng ta đã được học thuộc tính computed, nó là nơi để chúng ta có thể xử lý những dữ liệu phức tạp và bind data, vậy thì trường hợp trên nó sẽ được sử dụng như sau:

<section id="styling">
  <div @click="selectBox('A')" class="demo" :class="boxAClasses"></div>
  ...
</section>

const app = Vue.createApp({
    data() {
        return {
            selectedBoxA: false,
            selectedBoxB: false,
            selectedBoxC: false,
        }
    },
    computed: {
        boxAClasses() {
            // thực hiện thêm condition

            // trả về dữ liệu
            return {active: this.selectedBoxA};
        }
    },
    methods: {
        selectBox(box) {
            if(box == 'A') {
                this.selectedBoxA = !this.selectedBoxA;
            } else if(box == 'B') {
                this.selectedBoxB = !this.selectedBoxB;
            } else if(box == 'C') {
                this.selectedBoxC = !this.selectedBoxC;
            }
        }
    },
})
app.mount('#styling');