Liên kết CSS Vue
Tìm hiểu thêm về cách sử dụng v-bind để sửa đổi CSS với các thuộc tính style và class .
Mặc dù khái niệm thay đổi thuộc style và class bằng v-bind khá đơn giản nhưng cú pháp có thể cần một chút để làm quen.
CSS động trong Vue
Bạn đã thấy cách chúng ta có thể sử dụng Vue để sửa đổi CSS bằng cách sử dụng v-bind trên các thuộc tính style và class . Nó đã được giải thích ngắn gọn trong hướng dẫn này theo v-bind và một số ví dụ về CSS thay đổi Vue cũng đã được đưa ra.
Ở đây chúng tôi sẽ giải thích chi tiết hơn về cách CSS có thể được thay đổi linh hoạt với Vue. Nhưng trước tiên, hãy xem hai ví dụ với các kỹ thuật mà chúng ta đã thấy trong hướng dẫn này: tạo kiểu nội tuyến với v-bind:style và gán một lớp với v-bind:class
Tạo kiểu nội tuyến
Chúng tôi sử dụng v-bind:style để tạo kiểu nội tuyến trong Vue.
Ví dụ
Phần tử <input type="range"> được sử dụng để thay đổi độ mờ của phần tử <div> bằng cách sử dụng kiểu dáng nội tuyến.
<input type="range" v-model="opacityVal">
<div v-bind:style="{ backgroundColor: 'rgba(155,20,20,'+opacityVal+')' }">
Drag the range input above to change opacity here.
</div>
Hãy tự mình thử »Chỉ định một lớp
Chúng tôi sử dụng v-bind:class để gán một lớp cho thẻ HTML trong Vue.
Ví dụ
Chọn hình ảnh món ăn. Thực phẩm đã chọn được đánh dấu bằng cách sử dụng v-bind:class để hiển thị những gì bạn đã chọn.
<div v-for="(img, index) in images">
<img v-bind:src="img.url"
v-on:click="select(index)"
v-bind:class="{ selClass: img.sel }">
</div>
Hãy tự mình thử »Các cách khác để chỉ định lớp và phong cách
Dưới đây là các khía cạnh khác nhau liên quan đến việc sử dụng v-bind:class và v-bind:style mà chúng ta chưa từng thấy trước đây trong hướng dẫn này:
- Khi các lớp CSS được gán cho một thẻ HTML có cả
class=""vàv-bind:class=""Vue sẽ hợp nhất các lớp. - Một đối tượng chứa một hoặc nhiều lớp được gán
v-bind:class="{}". Bên trong đối tượng, một hoặc nhiều lớp có thể được bật hoặc tắt. - Với kiểu dáng nội tuyến (
v-bind:style) CamelCase được ưu tiên khi xác định thuộc tính CSS, nhưng 'kebab-case' cũng có thể được sử dụng nếu nó được viết bên trong dấu ngoặc kép. - Các lớp CSS có thể được gán bằng mảng/với ký hiệu/cú pháp mảng
Những điểm này được giải thích chi tiết hơn dưới đây.
1. Vue hợp nhất 'class' và 'v-bind:class'
Trong trường hợp thẻ HTML thuộc về một lớp được gán với class="" và cũng được gán cho một lớp với v-bind:class="" , Vue sẽ hợp nhất các lớp cho chúng ta.
Ví dụ
Phần tử <div> thuộc về hai lớp: 'impClass' và 'yelClass'. Lớp 'quan trọng' được đặt theo cách thông thường với thuộc tính class và lớp 'màu vàng' được đặt bằng v-bind:class .
<div class="impClass" v-bind:class="{yelClass: isYellow}">
This div belongs to both 'impClass' and 'yelClass'.
</div>
Hãy tự mình thử »2. Gán nhiều lớp với 'v-bind:class'
Khi gán một phần tử HTML cho một lớp bằng v-bind:class="{}" , chúng ta chỉ cần sử dụng dấu phẩy để phân tách và gán nhiều lớp.
Ví dụ
Phần tử <div> có thể thuộc cả hai lớp 'impClass' và 'yelClass', tùy thuộc vào thuộc tính dữ liệu boolean Vue 'isYellow' và 'isImportant'.
<div v-bind:class="{yelClass: isYellow, impClass: isImportant}">
This tag can belong to both the 'impClass' and 'yelClass' classes.
</div>
Hãy tự mình thử »3. Ký hiệu kiểu dáng lạc đà và kiểu dáng kebab với 'v-bind:style'
Khi sửa đổi CSS trong Vue bằng kiểu dáng nội tuyến ( v-bind:style ), bạn nên sử dụng ký hiệu CamelCase cho thuộc tính CSS, nhưng cũng có thể sử dụng 'kebab-case' nếu thuộc tính CSS nằm trong dấu ngoặc kép.
Ví dụ
Ở đây, chúng tôi đặt các thuộc tính CSS background-color và font-weight cho phần tử <div> theo hai cách khác nhau: cách được đề xuất với CamelCase backgroundColor và cách không được đề xuất với 'kebab-case' trong dấu ngoặc kép 'font-weight' . Cả hai lựa chọn thay thế đều hoạt động.
<div v-bind:style="{ backgroundColor: 'lightpink', 'font-weight': 'bolder' }">
This div tag has pink background and bold text.
</div>
Hãy tự mình thử »Ký hiệu 'vỏ lạc đà' và 'vỏ kebab' là cách viết một chuỗi từ không có dấu cách hoặc dấu câu.
- Ký hiệu chữ hoa lạc đà là khi từ đầu tiên bắt đầu bằng một chữ cái nhỏ và mọi từ sau đó đều bắt đầu bằng một chữ cái viết hoa, như 'backgroundColor' hoặc 'camelCaseNotation'. Nó được gọi là trường hợp lạc đà vì chúng ta có thể tưởng tượng mỗi chữ in hoa giống như một cái bướu trên lưng lạc đà.
- Ký hiệu kiểu Kebab là khi các từ được phân tách bằng dấu gạch ngang
-, như 'màu nền' hoặc 'ký hiệu kiểu kebab'. Nó được gọi là hộp kebab vì chúng ta có thể tưởng tượng các dấu gạch ngang giống như xiên trong 'shish kebab'.
4. Cú pháp mảng với 'v-bind:class'
Chúng ta có thể sử dụng cú pháp mảng với v-bind:class để thêm nhiều lớp. Với cú pháp mảng, chúng ta có thể sử dụng cả hai lớp phụ thuộc vào thuộc tính Vue và các lớp không phụ thuộc vào thuộc tính Vue.
Ví dụ
Ở đây, chúng tôi đặt các lớp CSS 'impClass' và 'yelClass' bằng cú pháp mảng. Lớp 'impClass' phụ thuộc vào thuộc tính Vue isImportant và lớp 'yelClass' luôn được gắn với phần tử <div> .
<div v-bind:class="[{ impClass: isImportant }, 'yelClass' ]">
This div tag belongs to one or two classes depending on the isImportant property.
</div>
Hãy tự mình thử »