1. Hãy dành vài giây Đăng nhập hoặc Đăng ký tài khoản để truy cập và sử dụng TBit hiệu quả nhất.
    Ẩn thông báo
  2. Bạn hãy like trang Facebook của TBit để nhận được tin tức công nghệ nhanh nhất từ chúng tôi.
    Ẩn thông báo

VueJS Bài 8: Binding Class và Binding Style

Thảo luận trong 'JavaScript' bắt đầu bởi Phạm Đạt, 12/7/18.

0/5, 0 phiếu

    1. Phạm Đạt TBit-Mod

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

      [​IMG]

      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.

      HTML:
      1. <div v-bind:class="{ active: isActive }"></div>
      Nếu giá trị của isActive true 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.

      HTML:
      1. <div class="static"
      2.      v-bind:class="{ active: isActive, 'error': hasError }">
      3. </div>
      Mình sẽ làm một ví dụ cho bạn dễ hình dung hơn.

      HTML:
      1.     .active{
      2.         border: solid 1px red;
      3.     }
      4.  
      5. <div id="example">
      6.     <p v-bind:class='{active:isActive}'>Message: "{{ message }}"</p>
      7. </div>
      8.  
      9. <script language="javascript">
      10.     var vm = new Vue({
      11.         el : "#example",
      12.         data : {
      13.             isActive : true
      14.         }
      15.     });
      Ngoài ra bạn có thể khai báo object trong data.

      HTML:
      1. <div id="example">
      2.     <p v-bind:class='showClass'> Binding Class</p>
      3. </div>
      4.  
      5. <script language="javascript">
      6.     var vm = new Vue({
      7.         el : "#example",
      8.         data : {
      9.             showClass : {
      10.                 "active" : true
      11.             }
      12.         }
      13.     });
      Bạn cũng có thể sử dụng computed.

      HTML:
      1. <div id="example">
      2.     <p v-bind:class='showClass'>Binding Class</p>
      3. </div>
      4.  
      5. <script language="javascript">
      6.     var vm = new Vue({
      7.         el : "#example",
      8.         computed : {
      9.             showClass : function(){
      10.                 return {
      11.                     "active" : true
      12.                 };
      13.             }
      14.         }
      15.     });
      • Truyền kiểu mảng
      Chúng ta có thể truyền một Array vào v-bind:class.

      HTML:
      1. <div id="example">
      2.     <div v-bind:class="[activeClass, errorClass]">Array</div>
      3. </div>
      4.  
      5. <script language="javascript">
      6.     var vm = new Vue({
      7.         el : "#example",
      8.         data: {
      9.            activeClass: "active",
      10.            errorClass: "error"
      11.         }
      12.     });
      Kết quả sẽ render thành:

      HTML:
      1. <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:

      HTML:
      1. <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:

      HTML:
      1. <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.

      HTML:
      1. <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.

      HTML:
      1. data: {
      2.    activeColor: 'blue',
      3.    fontSize: 35
      4. }
      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:

      HTML:
      1. <div v-bind:style="styleObject"></div>
      HTML:
      1. data: {
      2.     styleObject: {
      3.         color: 'blue',
      4.         fontSize: '35px'
      5.     }
      6. }
      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:

      HTML:
      1. <div v-bind:style="[addActive, addError]"></div>
      HTML:
      1. data: {
      2.    addActive: {
      3.        "background" : "blue",
      4.        "font-size" : "20px"
      5.    },
      6.    addError : {
      7.        "color" : "red"
      8.    }
      9. }
      Trong đó addActiveaddError 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é.
       
      Đang tải...

Chia sẻ trang này

Đang tải...