Thiết lập thuộc tính class, style thẻ HTML với v-bind Vue.js

Thẻ HTML là những viên gạch cơ bản nhất xây dựng lên các website, mỗi thẻ HTML có ba thành phần chúng ta có thể tác động vào:

<h1 class="post-title" style="color:red;" onlick="alert('Xin chào, tôi là Vue.js');">Gán thuộc tính với v-bind</h1>
  1. Giá trị của thẻ, thường nằm giữa mã mở thẻ và mã đóng thẻ. “Gán thuộc tính với v-bind” là giá trị của thẻ h1.
  2. Thuộc tính của thẻ là những thiết lập cho thẻ, trong ví dụ trên class, style là các thuộc tính của thẻ.
  3. Sự kiện trên thẻ, mỗi thẻ sẽ có một số sự kiện nhất định, ở đây onlick chính là sự kiện nhấp chuột vào thẻ h1.

Trong Bài giới thiệu cú pháp câu lệnh trong Vue.js chúng ta đã làm quen với cách làm việc với giá trị của thẻ thông qua cú pháp {{ }} hoặc sử dụng v-html (Xem lại bài viết để biết thêm chi tiết), hai cách này để xử lý nội dung rất đơn giản. Bài viết này sẽ tập trung vào cách thức tương tác với thuộc tính của thẻ trong HTML thông qua directive v-bind, qua đó bạn sẽ thấy thiết kế giao diện động với Vue.js thật đơn giản.

1. Thiết lập thuộc tính class trong HTML

Thuộc tính class của các thành phần thẻ HTML được sử dụng để đánh dấu các phần tử theo các nhóm (class) giúp dễ dàng viết mã CSS, Javascript sau này. Ví dụ bạn có hàng trăm thẻ <img> cần được thiết kế theo một khuôn mẫu, bạn chỉ cần thiết lập cho chúng vào một class chung và viết mã CSS cho nhóm class đó. V-bind trong Vue.js cho phép bạn thiết lập thuộc tính class này dễ dàng, có hai tùy chọn tham số cho v-bind là một đối tượng hoặc một mảng.

1.1 Sử dụng đối tượng làm tham số cho v-bind

Chúng ta có thể truyền một đối tượng vào v-bind:class và tùy thuộc vào giá trị từng thuộc tính của đối tượng mà các class khác nhau được gán vào. Ví dụ sau đây gán một đối tượng vào thuộc tính class của một thẻ <p> chứa nội dung một đoạn text, giá trị các thuộc tính của đối tượng phụ thuộc vào các checkbox.

<!DOCTYPE html>
<html>
<head>
    <title>Thiết lập thuộc tính class với v-bind Vuejs - Allaravel.com</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
    <div id="app" class="container">        
        <div class="row">
            <div class="col-md-12 text-center">
                <h1>Thiết lập thuộc tính class với v-bind</h1>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <input type="checkbox" v-model="success"> Màu xanh
            </div>
            <div class="col-md-12">
                <input type="checkbox" v-model="mark"> Highlight
            </div>
            <div class="col-md-12">
                <input type="checkbox" v-model="uppercase"> Viết hoa tất cả
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <p v-bind:class="{'text-success': success, 'mark': mark, 'text-uppercase': uppercase}">
                    Vue.js là một framework Javascript tuyệt vời, dễ học và áp dụng cho các dự án web. Bạn dễ dàng làm chủ Vue với Khóa học Vue.js 2 miễn phí trong 7 ngày.
                </p>
            </div>
        </div>
    </div>
    <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>  
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                success: true,
                mark: false,
                uppercase: false
            }
        })
    </script>
</body>
</html>

Trong đoạn code trên chúng ta cần quan tâm đến

<p v-bind:class="{'text-success': success, 'mark': mark, 'text-uppercase': uppercase}">

Đây chính là đoạn mã sử dụng v-bind gán class của thẻ p cho một đối tượng có các thuộc tính phụ thuộc vào giá trị các ô checkbox. Chú ý, v-bind:class có thể được viết ngắn gọn thành :class, cách viết này có thể được sử dụng trong bài viết.

1.2 Sử dụng mảng làm tham số cho v-bind

Ngoài việc có thể sử dụng đối tượng làm tham số cho v-bind, chúng ta hoàn toàn có thể sử dụng mảng để truyền vào danh sách các class. Xem ví dụ sau đây:

<!DOCTYPE html>
<html>
<head>
    <title>Thiết lập thuộc tính class với v-bind Vuejs - Allaravel.com</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
    <div id="app" class="container">        
        <div class="row">
            <div class="col-md-12 text-center">
                <h1>Thiết lập thuộc tính class với v-bind</h1>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <label>Chọn màu</label>
            </div>
            <div class="col-md-2">
                <input type="radio" value="text-success" v-model="textColor"> Màu xanh lục
            </div>
            <div class="col-md-2">
                <input type="radio" value="text-danger" v-model="textColor"> Màu đỏ
            </div>
            <div class="col-md-2">
                <input type="radio" value="text-info" v-model="textColor"> Màu xanh lam
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <label>Căn lề chữ</label>
            </div>
            <div class="col-md-2">
                <input type="radio" value="text-left" v-model="textAlignment"> Trái
            </div>
            <div class="col-md-2">
                <input type="radio" value="text-center" v-model="textAlignment"> Giữa
            </div>
            <div class="col-md-2">
                <input type="radio" value="text-right" v-model="textAlignment"> Phải
            </div>
        </div>
        <div class="row">
            <div class="col-md-6 offset-md-3">
                <p v-bind:class="[textColor, textAlignment, (textAlignment == 'text-left') ? 'border-left' : (textAlignment == 'text-right') ? 'border-right' : 'border-left border-right']">
                    Vue.js là một framework Javascript tuyệt vời, dễ học và áp dụng cho các dự án web. Bạn dễ dàng làm chủ Vue với Khóa học Vue.js 2 miễn phí trong 7 ngày. Kiến thức Vue.js kết hợp với Laravel giúp bạn có thể tạo ra những hệ thống thực sự phức tạp với hiệu suất hoạt động cao. Ngoải ra bạn cũng cần có những kiến thức cơ bản về CSS, ES6... là nền tảng rất cơ bản của thiết kế web.
                </p>
            </div>
        </div>
    </div>
    <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                textColor: 'text-success',
                textAlignment: 'text-left'
            }
        })
    </script>
</body>
</html>

Chúng ta cùng xem đoạn code trên hoạt động như thế nào:

<p v-bind:class="[textColor, textAlignment, (textAlignment == 'text-left') ? 'border-left' : (textAlignment == 'text-right') ? 'border-right' : 'border-left border-right']">
    Vue.js là một framework Javascript tuyệt vời, dễ học và áp dụng cho các dự án web. Bạn dễ dàng làm chủ Vue với Khóa học Vue.js 2 miễn phí trong 7 ngày. Kiến thức Vue.js kết hợp với Laravel giúp bạn có thể tạo ra những hệ thống thực sự phức tạp với hiệu suất hoạt động cao. Ngoải ra bạn cũng cần có những kiến thức cơ bản về CSS, ES6... là nền tảng rất cơ bản của thiết kế web.
</p>

Đầu vào của v-bind:class là một mảng với hai phần tử đầu của mảng chứa giá trị của các nút radio được chọn, phần tử thứ 3 chứa class thiết lập border cho đoạn văn, phần tử này chứa các giá trị có điều kiện theo cú pháp (điều_kiên) ? ‘giá_trị_true’ : ‘giá_trị_false’.

So sánh các dùng tham số là đối tượng và mảng khi sử dụng v-bind:

  • Với đối tượng, chúng ta sẽ sử dụng tên thuộc tính làm tên class và giá trị thuộc tính quyết định có thiết lập tên class đấy vào thuộc tính class của thẻ HTML hay không?
  • Với mảng, chúng ta sử dụng giá trị phần tử mảng làm tên class gán vào.

1.3 Sử dụng v-bind với Vue component

Vue component giúp chúng ta xây dựng sẵn các module có thể tái sử dụng trong viết code. Khi chúng ta sử dụng v-bind:class với một Vue component nó sẽ thiết lập thuộc tính class cho phần tử HTML gốc của component. Theo dõi ví dụ sau, tạo sẵn một component:

Vue.component('my-component', {
  template: '<div><p class="text-center">Sử dụng v-bind với Vue component</p></div>'
})

Tiếp theo chúng ta sử dụng component và gán class cho component:

<my-component v-bind:class="{ active: isActive, 'text-success': isSuccess }"></my-component>
data: {
  isActive: false,
  isSuccess: true
}

Kết quả khi trang được render như sau:

<div class="text-success"><p class="text-center">Sử dụng v-bind với Vue component</p></div>

2. Thiết lập inline style cho phần tử HTML bằng v-bind

2.1 Truyền đối tượng cho v-bind để thiết lập inline style

Cú pháp v-bind:style đưa các thiết lập CSS vào phần tử HTML cũng gần giống như cách chúng ta sử dụng inline style thông thường:

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

Hoặc chúng ta có thể truyền vào một style object như sau:

<div v-bind:style="styleObject"></div>
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

Các đối tượng cũng có thể được tính toán trước trong thuộc tính computed như với v-bind:class.

2.2 Truyền mảng vào v-bind:style

Đôi khi bạn muốn đưa vào nhiều style object vào v-bind:style, Vue.js cho phép sử dụng mảng truyền vào:

<div v-bind:style="[baseStyles, overridingStyles]">

3. Thực hành sử dụng v-bind thiết lập class và style cho HTML

Chúng ta cùng nhau thực hành một ví dụ nhỏ để hiểu hơn về cách sử dụng v-bind:class và v-bind:style.

Ví dụ có chứa một nút mỗi khi click vào nút “Nhấn thử” thì Cảnh báo sẽ đổi từ class alert-success sang alert-warning hoặc ngược lại và đồng thời tăng kích thước font chữ thêm 1px. Mã nguồn của ví dụ như ở dưới đây, bạn copy và save vào file với phần mở rộng .html để thực hành nhé:

<!DOCTYPE html>
<html>
<head>
    <title>Thiết lập thuộc tính class với v-bind Vuejs - Allaravel.com</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
    <div class="container" id="app">
        <div class="row">
            <div class="col-md-12">
                <div class="alert" :class="{'alert-success':isSuccess,'alert-warning':!isSuccess}" :style="{fontSize:fontSize + 'px'}">
                    <strong>Cảnh báo!</strong> Vue.js là framework gây nghiện, bạn cần chú ý khi sử dụng :))
                </div>
            </div>
        </div>
        <div class="row">
            <button type="button" v-on:click="myClickHandler" class="btn btn-primary">Nhấn thử</button>
        </div>
    </div>
    <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                isSuccess: true,
                fontSize: 14
            },
            methods: {
                myClickHandler: function() {
                    this.isSuccess = !this.isSuccess;
                    this.fontSize += 1;
                }
            }
        })
    </script>
</body>
</html>

4. Kết luận

Qua việc sử dụng v-bind:class và v-bind:style để thiết lập class và style cho các phần tử trong HTML một lần nữa chúng ta thấy Vue.js thật sự rất đơn giản và hiệu quả cao. Giờ đây những giao diện cực động trên nền tảng web không còn là một món ăn hảo hạng mà chỉ có những website của các tổ chức lớn mới phục vụ được. Bạn đã bắt đầu thấy kết Vue.js rồi phải không? Đừng quên theo dõi hết tất cả các bài trong Khóa học Vue.js miễn phí này nhé và có bất kỳ thắc mắc nào, hãy cùng nhau trao đổi ở phần bình luận cuối bài. Hẹn gặp lại các bạn trong các bài kế tiếp.

3 thoughts on “Thiết lập thuộc tính class, style thẻ HTML với v-bind Vue.js

  1. ông nào viết code gà thế …viết như bot ..viết xong cũng chả xem bài viết thế nào rồi public kém …

Add Comment