Please enable JavaScript.
Coggle requires JavaScript to display documents.
Binding cho class và style:Một nhu cầu thường gặp khi thực hiện ràng buộc…
Binding cho class và style:Một nhu cầu thường gặp khi thực hiện ràng buộc dữ liệu (data binding) là quản lí danh sách class và các style của một phần tử web. Vì cả class và style đều là thuộc tính, chúng ta có thể dùng v-bind để xử lí: chỉ cần sử dụng các biểu đạt (expression) để tạo ra một chuỗi. Tuy nhiên, vì can thiệp vào việc nối chuỗi rất phiền phức và dễ mắc lỗi, Vue cung cấp một số tính năng hỗ trợ khi v-bind được dùng với class và style. Không chỉ có chuỗi, các biểu đạt này có thể xử lí cả mảng và object.
Binding class trong HTML
Sử dụng cú pháp Object
-
Cú pháp như trên nghĩa là class active sẽ được áp dụng tùy theo tính đúng sai (truthiness) của thuộc tính dữ liệu isActive.
Bạn có thể bật tắt nhiều class bằng cách dùng nhiều field (trường) trong object. Thêm vào đó, directive v-bind:class và thuộc tính class thông thường có thể được dùng cùng lúc với nhau. Nếu chúng ta có template sau:
Khi giá trị isActive hoặc hasError thay đổi, danh sách class sẽ được cập nhật tương ứng. Ví dụ, nếu hasError trở thành true, danh sách class sẽ trở thành "static active text-danger".
. Chúng ta cũng có thể bind vào một computed property (thuộc tính được tính toán) trả về một object. Dưới đây là một ví dụ điển hình cho kĩ thuật này:
Sử dụng cú pháp mảng
-
Đoạn code trên sẽ luôn luôn áp dụng class errorClass, nhưng chỉ áp dụng activeClass khi isActive mang giá trị đúng.
Cách làm này có thể hơi dài dòng nếu bạn có nhiều class theo điều kiện. Do đó, bạn có thể dùng cú pháp object bên trong cú pháp mảng
-
Binding cho inline style:“Inline style” có thể được hiểu và dịch nôm na là “các thuộc tính CSS được chèn trực tiếp vào thẻ HTML.” Do cách hiểu và dịch này quá dài dòng, chúng tôi sẽ dùng nguyên bản tiếng Anh “inline style.”
Sử dụng cú pháp object
Cú pháp object của v-bind:style rất đơn giản - trông giống như CSS thông thường, chỉ khác ở chỗ nó là một object JavaScript. Bạn có thể dùng camelCase hoặc kebab-case (đặt trong dấu nháy nếu là kebab-case) đối với tên thuộc tính CSS
-
Tự động thêm prefix
Khi bạn sử dụng một thuộc tính CSS còn khá mới và cần vendor prefix trong v-bind:style, ví dụ transform, Vue sẽ tự động phát hiện và thêm prefix thích hợp vào các style được áp dụng.
Nhiều giá trị
Bắt đầu từ phiên bản 2.3.0+ bạn có thể cung cấp một mảng các giá trị (đã có prefix) cho một thuộc tính CSS,
Với kĩ thuật này, Vue sẽ chỉ render ra giá trị cuối cùng trong mảng mà trình duyệt hỗ trợ. Trong ví dụ trên, Vue sẽ render display: flex trên các trình duyệt hỗ trợ flexbox.