\n`\n\nKhi giá trị `imageUrl` hoặc `link` thay đổi trong `data()`, Vue sẽ **tự động cập nhật** giao diện mà **không cần thao tác DOM thủ công**.\n\n---\n---\n\n## 3. Sử dụng `v-bind` để thay đổi class và style\n\n### Gán class động\n\n`\n
\n Nội dung\n
\n`\n\n- `active` sẽ được thêm vào khi `isActive = true`.\n\n- `text-danger` sẽ được thêm khi `hasError = true`.\n\n### Gán style động\n\n`\n
\n Văn bản màu động\n
\n`\n\n---\n---\n\n## 4. Sử dụng với Props trong Component\n\n`\n\n\n\n\n`\n\n`\n\n\n\n\n`\n\n---\n---\n\n## 5. Điểm mạnh của `v-bind`\n\n- **Tự động đồng bộ** dữ liệu từ model sang view.\n\n- **Giúp code ngắn gọn** (cú pháp rút gọn `:`).\n\n- Hỗ trợ **ràng buộc nhiều loại thuộc tính**: HTML attributes, DOM properties, component props, class, style, v.v.\n\n- Giúp tách biệt **logic** và **giao diện**, dễ bảo trì.\n\n---\n---\n\n💡 **Tóm lại:**\n`v-bind` là “cầu nối” giữa dữ liệu trong Vue và giao diện HTML. Khi dữ liệu thay đổi, giao diện cũng sẽ được cập nhật tương ứng — **không cần dùng `document.querySelector` hay `innerHTML`** như JavaScript thuần.\n\n---\n---\n\nOk, đây là một **demo Vue.js** đơn giản để anh thấy sức mạnh của `v-bind` khi dữ liệu thay đổi **real-time**.\nDemo này gồm 3 ví dụ: liên kết thuộc tính HTML, đổi class/style động, và truyền dữ liệu vào component qua props.\n\n---\n---\n\n## **Demo Vue 3: Sức mạnh của v-bind**\n\n`\n\n\n\n\n\n`\n\n---\n---\n\n### **UserCard.vue**\n\n`\n\n\n\n\n\n`\n\n---\n---\n\n### 🔹 Cách chạy demo\n\n- Tạo project Vue 3:\n\n`\nnpm init vue@latest\n`\n\n- Thêm file `UserCard.vue` và nội dung `App.vue` như trên.\n\n- Chạy:\n\n`\nnpm run dev\n`\n\n- Mở trình duyệt t","keywords":"VueJS","about":[{"@type":"Thing","name":"VueJS"}],"interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":0},"comment":[]}
TopDev
#VueJS

V-bind dùng để làm gì? Khám phá sức mạnh liên kết dữ liệu trong Vue.js

topdev 📖 4 phút đọc ✎ đã sửa

Trong Vue.js, v-bind là một directive (chỉ thị) dùng để liên kết động dữ liệu (data binding) từ thành phần JavaScript (data, computed, props, v.v.) sang thuộc tính của phần tử HTML hoặc thuộc tính của component.

Nói một cách dễ hiểu:

v-bind giúp bạn gắn giá trị của biến trong Vue vào thuộc tính HTML hoặc props của component một cách tự động và cập nhật theo thời gian thực khi dữ liệu thay đổi.

1. Cú pháp cơ bản#

`

v-bind:thuoc-tinh="bieu-thuc"

:thuoc-tinh="bieu-thuc" `

2. Ví dụ cơ bản#

`

`

Khi giá trị imageUrl hoặc link thay đổi trong data(), Vue sẽ tự động cập nhật giao diện mà không cần thao tác DOM thủ công.

3. Sử dụng v-bind để thay đổi class và style#

Gán class động#

`

Nội dung
`

  • active sẽ được thêm vào khi isActive = true.

  • text-danger sẽ được thêm khi hasError = true.

Gán style động#

`

Văn bản màu động
`

4. Sử dụng với Props trong Component#

`

`

`

`

5. Điểm mạnh của v-bind#

  • Tự động đồng bộ dữ liệu từ model sang view.

  • Giúp code ngắn gọn (cú pháp rút gọn :).

  • Hỗ trợ ràng buộc nhiều loại thuộc tính: HTML attributes, DOM properties, component props, class, style, v.v.

  • Giúp tách biệt logic và giao diện, dễ bảo trì.

💡 Tóm lại: v-bind là “cầu nối” giữa dữ liệu trong Vue và giao diện HTML. Khi dữ liệu thay đổi, giao diện cũng sẽ được cập nhật tương ứng — không cần dùng document.querySelector hay innerHTML như JavaScript thuần.

Ok, đây là một demo Vue.js đơn giản để anh thấy sức mạnh của v-bind khi dữ liệu thay đổi real-time. Demo này gồm 3 ví dụ: liên kết thuộc tính HTML, đổi class/style động, và truyền dữ liệu vào component qua props.

Demo Vue 3: Sức mạnh của v-bind#

`

`

UserCard.vue#

`

`

🔹 Cách chạy demo#

  • Tạo project Vue 3:

npm init vue@latest

  • Thêm file UserCard.vue và nội dung App.vue như trên.

  • Chạy:

npm run dev

  • Mở trình duyệt tại http://localhost:5173 và thử thay đổi các giá trị — giao diện sẽ tự động cập nhật ngay lập tức nhờ v-bind.

Bài liên quan trong #VueJS

✓ Đã sao chép link