GIỚI THIỆU
CĂN BẢN
NÂNG CAO
VUEJS 2X CĂN BẢN
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.

Bài viết này được đăng tại [free tuts .net]

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:

Bài tập VueJS 2: Sử dụng Axios hoặc Fetch API trong VueJS 2

Bài tập VueJS 2: Sử dụng Axios hoặc Fetch API trong VueJS 2

Bài tập VueJS 2: Two-way binding trong VueJS 2

Bài tập VueJS 2: Two-way binding trong VueJS 2

Bài tập VueJS 2: Xử lý sự kiện trong VueJS 2

Bài tập VueJS 2: Xử lý sự kiện trong VueJS 2

Bài tập VueJS 2: Components trong VueJS 2

Bài tập VueJS 2: Components trong VueJS 2

Bài tập VueJS 2: Binding dữ liệu trong VueJS 2

Bài tập VueJS 2: Binding dữ liệu trong VueJS 2

Sử dụng directives (v-bind, v-model) để hiển thị và cập nhật dữ liệu bằng VueJS 2

Sử dụng directives (v-bind, v-model) để hiển thị và cập nhật dữ liệu bằng VueJS 2

Tạo nút và xử lý sự kiện khi nút được nhấn trong VueJS 2

Tạo nút và xử lý sự kiện khi nút được nhấn trong VueJS 2

VueJS 2 Components: Tạo và quản lý ToDo List đơn giản

VueJS 2 Components: Tạo và quản lý ToDo List đơn giản

Các quy tắc trong VueJS 2

Các quy tắc trong VueJS 2

Tạo component và binding data trong VueJS 2

Tạo component và binding data trong VueJS 2

Tìm hiểu Scoped CSS trong VueJS 2

Tìm hiểu Scoped CSS trong VueJS 2

Sử dụng forceUpdate trong VueJS 2

Sử dụng forceUpdate trong VueJS 2

Sử dụng v-for trong VueJS 2

Sử dụng v-for trong VueJS 2

10 best practices trong VueJS 2

10 best practices trong VueJS 2

Các tạo Custom Directives trong VueJS 2

Các tạo Custom Directives trong VueJS 2

Sử dụng V-for và V-if trong VueJs 2

Sử dụng V-for và V-if trong VueJs 2

Sử dụng methods trong VueJS 2

Sử dụng methods trong VueJS 2

Khác nhau giữa slot và scoped slots trong VueJS 2

Khác nhau giữa slot và scoped slots trong VueJS 2

Tìm hiểu Slots trong VueJS 2

Tìm hiểu Slots trong VueJS 2

Xử lý Custom Events trong VueJS 2

Xử lý Custom Events trong VueJS 2

Top