Bạn bind class và style động trong Vue như thế nào?

Question

Accepted Answer

Vue cung cấp cho `:class` và `:style` **cú pháp object và array** đặc biệt để bạn có thể áp dụng có điều kiện các class và inline style dựa trên state reactive — gọn gàng hơn việc dựng chuỗi class thủ công. ## Cú pháp object cho :class — bật/tắt class theo điều kiện ```vue ``` Mỗi key là một tên class và mỗi giá trị là một điều kiện boolean — class chỉ xuất hiện khi giá trị của nó là truthy. Đây là mẫu phổ biến nhất cho styling dựa trên state (tab đang active, trạng thái lỗi, v.v.). ## Cú pháp array cho :class — kết hợp nhiều cái ```vue ``` ## :class hợp nhất với thuộc tính class tĩnh ```vue

...

``` Bạn có thể dùng cả `class` và `:class` cùng nhau; Vue hợp nhất chúng. ## Cú pháp object/array cho :style ```vue ``` ## Bind class trên component ```vue ``` ## Tại sao điều này quan trọng Bind class/style động là công việc Vue hằng ngày — làm nổi bật mục nav đang active, hiển thị lỗi validation, theming. Cú pháp object (`{ className: condition }`) khiến styling có điều kiện trở nên khai báo và dễ đọc, tránh việc nối chuỗi thủ công dễ sai. Biết rằng `:class` hợp nhất với `class` tĩnh, và dạng array để kết hợp nhiều nguồn, bao quát gần như mọi nhu cầu styling có điều kiện một cách gọn gàng.