GIỚI THIỆU
CĂN BẢN
NÂNG CAO
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

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.

test php

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

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

Cùng chuyên mục:

VueJS 2: Conditional Rendering (v-if và v-show)

VueJS 2: Conditional Rendering (v-if và v-show)

Trong bài này chúng ta sẽ tìm hiểu một số directive có nhiệm vụ xử…

VueJS 2: Tìm hiểu Watchers

VueJS 2: Tìm hiểu Watchers

Trong bài này chúng ta sẽ tìm hiểu về Vue Watcher, đây là cách để…

VueJS2: Computed Properties

VueJS2: Computed Properties

Computed Properties dịch sang tiếng Việt rất khó hiểu nên mình sẽ dùng từ này…

VueJS 2: Tìm hiểu Methods

VueJS 2: Tìm hiểu Methods

Methods không còn xa lạ với nhưng bạn đã từng tìm hiểu qua lập trình…

VueJS 2: Template Syntax

VueJS 2: Template Syntax

Giống như những thư viện Javascript khác, việc xử lý template chủ yếu dựa vào…

VueJS 2: Tìm hiểu Vue Instance

VueJS 2: Tìm hiểu Vue Instance

Instance trong lập trình chính là thể hiện của một lớp. Ví dụ nếu bạn…

VueJS 2: Cài đặt VueJS và viết chương trình Hello World

VueJS 2: Cài đặt VueJS và viết chương trình Hello World

Trong bài này mình sẽ cùng các bạn tìm hiểu cách cài đặt và viết…

VueJS là gì?

VueJS là gì?

Hôm nay chúng ta lại tiếp tục tìm hiểu một thư viện Javascript mới, hay…

Top