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 BindingStyle Binding bằng cú pháp v-bind:classv-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.

Cú pháp
<div v-bind:class="{ active: isActive }"></div>

Nếu giá trị của isActivetrue 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.

Code
<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.

Code RUN
<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.

Code RUN
<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.

Code RUN
<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.

Code
<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é.

Nguồn: freetuts.net

KHÓA HỌC ĐANG GIẢM GIÁ

FEDU - 34- THỰC HÀNH THIẾT KẾ DỮ LIỆU VỚI SQL QUA BÀI TẬP

(Giảng viên: Nguyễn Đức Việt)

XEM
FEDU - 30 – HTML CSS cơ bản

(Giảng viên: Nguyễn Đức Việt)

XEM
FEDU - 029- Học lập trình React js và Redux từ đầu, tạo ứng dụng fullstack với Node JS + React JS

(Giảng viên: Nguyễn Đức Việt)

XEM
FEDU - 27 – Lập trình back-end cơ bản với nodejs & mongodb, mongooose, postgresql.

(Giảng viên: Nguyễn Đức Việt)

XEM
FEDU - 25 – Thiết kế hiệu ứng bằng Javascript và illustrator

(Giảng viên: NGUYỄN ĐỨC VIỆT )

XEM