VueJS 2: Binding Class và Binding Style

Trong bài này chúng ta sẽ tìm hiểu cơ chế ràng buộc dữ liệu (binding data) hay còn gọi là bind. Nó là một directive thể hiện sự ràng buộc giữa các thuộc tính của thẻ HTML như class, style và dữ liệu data trong Vue.

Khi lập trình ứng dụng web kết hợp với Javascript thì chúng ta rất hay sử dụng tới tên class, các đoạn CSS Inline nên nếu có quá nhiều đoạn code nằm bên trong thì nhìn sẽ rất rối, vì vậy VueJS2 cung cấp cho chúng ta hai loại đó là Class Binding và Style Binding bằng cú pháp v-bind:class và v-bind:style.

1. Binding HTML Classes

Chúng ta có hai cách truyền khác nhau.

Truyền kiểu Object

Chúng ta có thể truyền định dạng kiểu Object để bật và tắt các class.

Bài viết này được đăng tại [kiso.vn]

<div v-bind:class="{ active: isActive }"></div>

Nếu giá trị của isActive là true thì class active sẽ được bổ sung vào thẻ HTML, ngược lại class active sẽ không xuất hiện.

Nếu bạn muốn xử ý nhiều class cùng một lúc thì có thể truyền thêm giá trị vào object.

<div class="static"
     v-bind:class="{ active: isActive, 'error': hasError }">
</div>

Mình sẽ làm một ví dụ cho bạn dễ hình dung hơn.

<style>
    .active{
        border: solid 1px red;
    }
</style>

<div id="example">
    <p v-bind:class='{active:isActive}'>Message: "{{ message }}"</p>
</div>

<script language="javascript">
    var vm = new Vue({
        el : "#example",
        data : {
            isActive : true
        }
    });
</script>

Ngoài ra bạn có thể khai báo object trong data.

<div id="example">
    <p v-bind:class='showClass'>Binding Class</p>
</div>

<script language="javascript">
    var vm = new Vue({
        el : "#example",
        data : {
            showClass : {
                "active" : true
            }
        }
    });
</script>

Bạn cũng có thể sử dụng computed.

<div id="example">
    <p v-bind:class='showClass'>Binding Class</p>
</div>

<script language="javascript">
    var vm = new Vue({
        el : "#example",
        computed : {
            showClass : function(){
                return {
                    "active" : true
                };
            }
        }
    });
</script>

Truyền kiểu mảng

Chúng ta có thể truyền một Array vào v-bind:class.

<div id="example">
    <div v-bind:class="[activeClass, errorClass]">Array</div>
</div>

<script language="javascript">
    var vm = new Vue({
        el : "#example",
        data: {
           activeClass: "active",
           errorClass: "error"
        }
    });
</script>

Kết quả sẽ render thành:

<div class="active error"></div>

Với cách này thì các class sẽ luôn được thêm vào, nên nếu bạn muốn không thêm thì có thể sử dụng toán tử ba ngôi:

<div v-bind:class="[isActive ? 'activeClass' : '', errorClass]">Array</div>

Class errorClass sẽ luôn luôn được thêm vào, nhưng class activeClass chỉ được thêm vòa khi giá trị của isActive là true.

Sử dụng toán tử ba ngôi tuy nhanh nhưng rườm rà, vì vậy bạn có thể khai báo dạng object bên trong array như sau:

<div v-bind:class="[{ 'active': isActive }, errorClass]"></div>

2. Binding Inline Styles

Chúng ta cũng có hai cách thông dụng đó là truyền kiểu Object và truyền kiểu Array.

Truyền kiểu Object

Cú pháp kiểu Object rất chuẩn, nhìn rất giống cách viết CSS.

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

Giá trị của các thuộc tính ta sẽ khai báo trong data.

data: {
   activeColor: 'blue',
   fontSize: 35
}

Chúng ta không nên xử lý dữ liệu quá nhiều bên phía template mà thay vào đó hãy thực hiện bên Javascript (data hoặc computed). Như ví dụ trên mình sẽ sửa lại như sau:

<div v-bind:style="styleObject"></div>

data: {
    styleObject: {
        color: 'blue',
        fontSize: '35px'
    }
}

Các bạn hay tự thử thực hiện với computed xem sao nhé 🙂

Truyền kiểu Array

Mình sẽ không giải thích nhiều phần này nữa vì cách sử dụng cung giống như cơ chế binding class. Bạn có thể truyền cho v-bind:style một Array gồm nhiều Object như sau:

<div v-bind:style="[addActive, addError]"></div>

data: {
   addActive: {
       "background" : "blue",
       "font-size" : "20px"
   },
   addError : {
       "color" : "red"
   }
}

Trong đó addActive và addError là những object có dạng key:value.

3. Lời kết

Phần này khá đơn giản và mình cũng chủ yếu dịch lại từ trang chủ của VueJS, vì vậy nếu bạn muốn đọc tiếng Anh thì có thể lên trang chủ của nó nhé.

Qua bài này bạn sẽ thấy khi làm việc với Vue chúng ta sử dụng rất nhiều đến Array và Object, vì vậy nếu bạn chưa rành hai phần này thì hãy tìm hiểu nó trong series Javascript căn bản nhé.