Chỉ thị Vue v-bind
Bạn đã thấy rằng thiết lập Vue cơ bản bao gồm một phiên bản Vue và chúng ta có thể truy cập nó từ thẻ <div id="app"> bằng {{ }} hoặc lệnh v-bind .
Ở trang này chúng tôi sẽ giải thích chi tiết hơn về lệnh v-bind .
Chỉ thị v-bind
Lệnh v-bind cho phép chúng ta liên kết một thuộc tính HTML với dữ liệu trong phiên bản Vue. Điều này giúp dễ dàng thay đổi giá trị thuộc tính một cách linh hoạt.
Cú pháp
<div v-bind:[ attribute ]="[ Vue data ]"></div>
Ví dụ
Giá trị thuộc tính src của thẻ <img> được lấy từ thuộc tính dữ liệu phiên bản Vue 'url':
<img v-bind:src="url">
Hãy tự mình thử »Liên kết CSS
Chúng ta có thể sử dụng lệnh v-bind để tạo kiểu nội tuyến và sửa đổi các lớp một cách linh hoạt. Chúng tôi sẽ chỉ cho bạn cách thực hiện điều đó một cách ngắn gọn trong phần này và sau đó trong hướng dẫn này, trên trang CSS Binding , chúng tôi sẽ giải thích điều này chi tiết hơn.
Kiểu ràng buộc
Tạo kiểu nội tuyến với Vue được thực hiện bằng cách liên kết thuộc tính style với Vue bằng v-bind .
Là một giá trị cho lệnh v-bind, chúng ta có thể viết một đối tượng JavaScript với thuộc tính và giá trị CSS:
Ví dụ
Kích thước phông chữ phụ thuộc vào 'kích thước' thuộc tính dữ liệu Vue.
<div v-bind:style="{ fontSize: size }">
Text example
</div>
Hãy tự mình thử »Chúng ta cũng có thể tách giá trị số cỡ chữ khỏi đơn vị cỡ chữ nếu muốn, như sau:
Ví dụ
Giá trị số kích thước phông chữ được lưu trữ 'size' thuộc tính dữ liệu Vue.
<div v-bind:style="{ fontSize: size + 'px' }">
Text example
</div>
Hãy tự mình thử »Chúng ta cũng có thể viết tên thuộc tính CSS bằng cú pháp CSS (kebab-case) bằng dấu gạch nối, nhưng điều này không được khuyến khích:
Ví dụ
Thuộc tính CSS fontSize được gọi là 'font-size'.
<div v-bind:style="{ 'font-size' : size + 'px' }">
Text example
</div>
Hãy tự mình thử »Ví dụ
Màu nền phụ thuộc vào giá trị thuộc tính dữ liệu 'bgVal' bên trong phiên bản Vue.
<div v-bind:style="{ backgroundColor: 'hsl('+bgVal+',80%,80%)' }">
Notice the background color on this div tag.
</div>
Hãy tự mình thử »Ví dụ
Màu nền được đặt bằng biểu thức có điều kiện (thứ ba) JavaScript tùy thuộc vào việc giá trị thuộc tính dữ liệu 'isImportant' là 'true' hay 'false'.
<div v-bind:style="{ backgroundColor: isImportant ? 'lightcoral' : 'lightgray' }">
Conditional background color
</div>
Hãy tự mình thử »Lớp liên kết
Chúng ta có thể sử dụng v-bind để thay đổi thuộc tính lớp.
Giá trị của v-bind:class có thể là một biến:
Ví dụ
Tên class được lấy từ thuộc tính dữ liệu Vue 'className':
<div v-bind:class="className">
The class is set with Vue
</div>
Hãy tự mình thử » Giá trị của v-bind:class cũng có thể là một đối tượng, trong đó tên lớp sẽ chỉ có hiệu lực nếu nó được đặt thành 'true':
Ví dụ
Thuộc tính class được gán hay không tùy thuộc vào việc lớp 'myClass' được đặt thành 'true' hay 'false':
<div v-bind:class="{ myClass: true }">
The class is set conditionally to change the background color
</div>
Hãy tự mình thử » Khi giá trị của v-bind:class là một đối tượng, lớp có thể được chỉ định tùy thuộc vào thuộc tính Vue:
Ví dụ
Thuộc tính class được chỉ định tùy thuộc vào thuộc tính 'isImportant', nếu thuộc tính đó là 'true' hoặc 'false':
<div v-bind:class="{ myClass: isImportant }">
The class is set conditionally to change the background color
</div>
Hãy tự mình thử » Viết tắt của v-bind
Viết tắt của ' v-bind: ' chỉ đơn giản là ' : '.
Ví dụ
Ở đây chúng ta chỉ viết ' : ' thay vì ' v-bind: ':
<div :class ="{ impClass: isImportant }">
The class is set conditionally to change the background color
</div>
Hãy tự mình thử » Chúng ta sẽ tiếp tục sử dụng cú pháp v-bind: trong hướng dẫn này để tránh nhầm lẫn.
