Class và style bindings trong Vue.js

Bài này chúng ta sẽ tìm hiểu về class và style bindings trong Vue.js. Hai khái niệm không thể thiếu trong các javascript framework.

-Trong vue.js chúng ta sử dụng directive v-bind để thực hiện bind vào các HTML tag các chuỗi chứa tên class và style.

1, Classes Binding.

Trong vue.js chúng ta có hai cách thực hiện binding HTML classes và hai cách này cũng sử dụng được trong component.

Cú pháp kiểu object

-Trong vue.js chúng ta có thể truyền 1 object vào v-bind:class để bật tắt class một cách tự động.

VD:

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

-Đoạn code trên thể hiện sự xuất hiện của class active là hoàn toàn phụ thuộc vào giá trị của isActive là true hay false. Và đương nhiên bạn cũng có thể tắt mở nhiều class bằng cách thêm các trường vào trong object.

VD:

<h1 v-bind:class="{ active : isActive, 'text-red': isRed }"></h1>

-Lúc này bạn chỉ cần xác định giá trị cho các trường đó là true thì nó sẽ hiển thị vào false thì nó sẽ không hiển thị.

Để cho dễ hiểu hơn thì các bạn có thể tham khảo ví dụ sau:

VD: toggle class text-red của thẻ h1.

<div id="app">
    <h1 v-bind:class="{ 'text-red': isRed }">Chào mừng bạn đến với website toidicode.com</h1>
    <button type="button" v-on:click="toggleClass">Toggle Class</button>
</div>
<script  type="text/javascript"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            isRed: true
        },
        methods: {
            toggleClass : function () {
                if (this.isRed == true) {
                    this.isRed = false;
                } else {
                    this.isRed = true;
                }
            }
        }
    });
</script>

Chạy Code

Đoạn code trên mình code rất dê hiểu rồi, nên mình sẽ không comment chú thích hay giải thích gì thêm nữa.

-Tuy nhiên, thì object này cũng không nhất thiết phải viết inline trên tag HTML mà chũng ta có thể chuyển nó vào trong data scope như sau:

<div id="app">
    <h1 v-bind:class="classObject">Chào mừng bạn đến với website toidicode.com</h1>
    <button type="button" v-on:click="toggleClass">Toggle Class</button>
</div>
<script  type="text/javascript"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            classObject:
            { 'text-red': true }
        }
    });
</script>

Chạy Code

Hoặc bạn cũng có thể cho object này vào trong một computed.

<div id="app">
    <h1 v-bind:class="classObject">Chào mừng bạn đến với website toidicode.com</h1>
</div>
<script  type="text/javascript"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            isRed: true
        },
        computed: {
            classObject : function () {
                return { 'text-red' : this.isRed}
            }
        }
    });
</script>

Chạy Code

Cú pháp Array

-Ngoài cách bind bằng kiểu bject thì trong Vue.js cũng hỗ trợ cho chúng ta bind vào class dạng mảng.

<h1 v-bind:class="[active, textRed]"></h1>

Lúc này active, và textRed sẽ là 2 thuộc tính của vue instance chứa giá trị là tên của class cần thay thế.

VD:

<div id="app">
    <h1 v-bind:class="[border, textRed]">Chào mừng bạn đến với website toidicode.com</h1>
    <button type="button" v-on:click="toggleClass">Toggle Class</button>
</div>
<script  type="text/javascript"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            border: 'border-bottom',
            textRed: 'text-red'
        }
    });
</script>

Chạy Code

Lúc này tag h1 sẽ được render thành:

<h1 class="border-bottom text-red">Chào mừng bạn đến với website toidicode.com</h1>

Nếu như bạn muốn không hiển thị class nào thì bạn cũng chỉ cần thay đổi giá trị của trường đó thành false.

VD: Toggle class text-red.

<div id="app">
    <h1 v-bind:class="[border, textRed]">Chào mừng bạn đến với website toidicode.com</h1>
    <button type="button" v-on:click="toggleClass">Toggle Class</button>
</div>
<script  type="text/javascript"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            border: 'border-bottom',
            textRed: 'text-red'
        },
        methods: {
            toggleClass : function () {
                if (this.textRed == 'text-red') {
                    this.textRed = false;
                } else {
                    this.textRed = 'text-red';
                }
            }
        }
    });
</script>

Chạy Code

Hoặc bạn cũng có thể viết dưới dạng biểu thức điều kiện rút gọn như sau:

<h1 v-bind:class="[border ? 'border-bottom' : '', textRed]"></h1>

Lúc này class border-bottom sẽ được hiển thị nếu như border có giá trị là true và ngược lại nó sẽ không hiển thị nếu như border có giá trị là false.

Và Vue.js cũng hỗ trợ chúng ta khai báo kiểu object trong mảng.

VD:

<div id="app">
    <h1 v-bind:class="[{'border-bottom' : border}, textRed]">Chào mừng bạn đến với website toidicode.com</h1>
</div>
<script  type="text/javascript"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            border: true,
            textRed: 'text-red'
        }
    });
</script>

Chạy Code

2, Binding inline styles.

-Đối với binding inline styles chúng ta cũng có thể sử dụng được các cách bind nhưng binding class.

Kiểu Object

-Đối với kiểu này thì các bạn sử dụng như đối với binding class, nhưng chỉ khác là giá trị lúc này sẽ không phải true false nữa, mà giá trị sẽ là giá trị của thuộc tính các bạn cần style cho nó. Nếu như bạn không muốn hiển thị thuộc tính đó nữa thì chỉ việc đổi giá trị của nó thành false.

VD:

<div id="app">
<h1 v-bind:style="{color: colorValue, borderBottom : borderValue, paddingBottom: paddingValue}">Chào mừng bạn đến với website toidicode.com</h1>
</div>
<script  type="text/javascript"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            colorValue: 'red',
            borderValue: '1px solid orange',
            paddingValue: '10px',
        }
    });
</script>

Chạy Code

Lúc này nếu như bạn không muốn hiển thị thuộc tính color: red nữa thì bạn chỉ cần đổi colorValue thành false.

VD: turn off color red property.

var app = new Vue({
    el: '#app',
    data: {
        colorValue: false,
        borderValue: '1px solid orange',
        paddingValue: '10px',
    }
});

Chạy Code

Đổi với cách này thì các thuộc tính có từ hai từ trở lên, ví dụ như text-align,border-bottom,... thì vue.js cung cấp cho chúng ta 2 cách viết nó là có thể viết dưới dạng camelCase hoặc viết dưới dạng bình thường là snake_case, nhưng đối với dạng này thì chúng ta phải bao ngoài nó là cặp dấu nháy '

VD:

<h1 v-bind:style="{'border-bottom' : borderValue, paddingBottom: paddingValue}"></h1>

Kiểu array

-Đối với kiểu array cũng tương tự như đối với binding class và vue.js cũng hỗ trợ chúng ta kiểu object trong kiểu array.

VD:

<div id="app">
    <h1 v-bind:style="[colorValue, borderValue, paddingValue]">Chào mừng bạn đến với website toidicode.com</h1>
</div>
<script  type="text/javascript"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            colorValue: {
                color : 'red'
            },
            borderValue: {
                //sanke_case
                'border-bottom' : '1px solid orange'
            },
            paddingValue: {
                //camelCase
                paddingBottom: '10px'
            }
        }
    });
</script>

Chạy Code

Trong vue.js đối với các thuộc tính đòi hỏi phải thêm các tiền tốprefix như transform, animation,... thì vue.js cũng sẽ tự động render thêm cho chúng ta các prefix đối với các trình duyệt hiện nay.

3, Lời kết.

-Phần này nếu như bạn nào cảm thấy khó hiểu nữa, thì mình nghĩ là các bạn nên quay lại Javascript căn bản. Vì ở bài này chẳng có gì gọi là advance cả.