Chào mừng đến với Cafedev, nơi chúng tôi chia sẻ kiến thức và kinh nghiệm về công nghệ. Hôm nay, chúng ta sẽ khám phá về cách sử dụng Vue.js với các ràng buộc lớp và kiểu dáng. Vue.js không chỉ mạnh mẽ trong việc quản lý trạng thái và tương tác, mà còn linh hoạt trong việc điều chỉnh giao diện với các ràng buộc lớp và kiểu dáng. Bằng cách này, bạn có thể tạo ra các ứng dụng web đẹp mắt và dễ dàng bảo trì. Hãy cùng khám phá chi tiết trong bài viết dưới đây!
Một nhu cầu phổ biến cho việc ràng buộc dữ liệu là thao tác với danh sách lớp và kiểu dạng nội tuyến của một phần tử. Vì class và style đều là các thuộc tính, chúng ta có thể sử dụng v-bind để gán cho chúng một giá trị chuỗi một cách động, giống như với các thuộc tính khác. Tuy nhiên, cố gắng tạo ra các giá trị này bằng cách nối chuỗi có thể làm phiền và dễ gặp lỗi. Vì lí do này, Vue cung cấp các cải tiến đặc biệt khi v-bind được sử dụng với class và style. Ngoài chuỗi, các biểu thức cũng có thể đánh giá thành các đối tượng hoặc mảng.
Nội dung chính
1. Ràng Buộc Các Lớp HTML
1.1 Ràng Buộc với Đối Tượng
Chúng ta có thể truyền một đối tượng vào :class (rút gọn của v-bind:class) để chuyển đổi các lớp động:
<div :class="{ active: isActive }"></div>Cú pháp trên có nghĩa là sự hiện diện của lớp active sẽ được xác định bởi sự thật của thuộc tính dữ liệu isActive.
Bạn có thể có nhiều lớp được chuyển đổi bằng cách có nhiều trường trong đối tượng. Ngoài ra, chỉ thị :class cũng có thể tồn tại cùng với thuộc tính class thường. Ví dụ, với trạng thái sau:
const isActive = ref(true)
const hasError = ref(false)Và mẫu sau:
<div
class="static"
:class="{ active: isActive, 'text-danger': hasError }"
</div>Sẽ render ra:
<div class="static active"></div>Khi isActive hoặc hasError thay đổi, danh sách lớp sẽ được cập nhật tương ứng. Ví dụ, nếu hasError trở thành true, danh sách lớp sẽ trở thành "static active text-danger".
Đối tượng được ràng buộc không nhất thiết phải là nội tuyến:
const classObject = reactive({
active: true,
'text-danger': false
})<div :class="classObject"></div>Điều này sẽ render ra:
<div class="active"></div>Chúng ta cũng có thể ràng buộc với một thuộc tính tính toán trả về một đối tượng. Đây là một mẫu phổ biến và mạnh mẽ:
const isActive = ref(true)
const error = ref(null)
const classObject = computed(() => ({
active: isActive.value && !error.value,
'text-danger': error.value && error.value.type === 'fatal'
}))<div :class="classObject"></div>1.2 Ràng Buộc với Mảng
Chúng ta có thể ràng buộc :class với một mảng để áp dụng một danh sách các lớp:
const activeClass = ref('active')
const errorClass = ref('text-danger')<div :class="[activeClass, errorClass]"></div>Điều này sẽ render ra:
<div class="active text-danger"></div>Nếu bạn muốn chuyển đổi một lớp trong danh sách một cách có điều kiện, bạn có thể làm điều đó bằng một biểu thức ba ngôi:
<div :class="[isActive ? activeClass : '', errorClass]"></div>Điều này luôn áp dụng errorClass, nhưng activeClass chỉ được áp dụng khi isActive là đúng.
Tuy nhiên, điều này có thể hơi dài dòng nếu bạn có nhiều lớp có điều kiện. Đó là lý do tại sao cũng có thể sử dụng cú pháp đối tượng bên trong cú pháp mảng:
<div :class="[{ activeClass: isActive }, errorClass]"></div>1.3 Với Các Thành Phần
Phần này giả định bạn có kiến thức về Các thành phần. Hãy thoải mái bỏ qua nó và quay lại sau.
Khi bạn sử dụng thuộc tính class trên một thành phần có một phần tử gốc duy nhất, những lớp đó sẽ được thêm vào phần tử gốc của thành phần và hợp nhất với bất kỳ lớp hiện có nào trên đó.
Ví dụ, nếu chúng ta có một thành phần có tên là MyComponent với mẫu sau:
<!-- child component template -->
<p class="foo bar">Hi!</p>Sau đó thêm một số lớp khi sử dụng nó:
<!-- when using the component -->
<MyComponent class="baz boo" />HTML được hiển thị sẽ là:
<p class="foo bar baz boo">Hi!</p>Điều này cũng đúng cho các liên kết lớp:
<MyComponent :class="{ active: isActive }" />Khi isActive là đúng, HTML được hiển thị sẽ là:
<p class="foo bar active">Hi!</p>Nếu thành phần của bạn có nhiều phần tử gốc, bạn sẽ cần xác định phần tử nào sẽ nhận lớp này. Bạn có thể làm điều này bằng cách sử dụng thuộc tính thành phần $attrs:
<!-- MyComponent template using $attrs -->
<p :class="$attrs.class">Hi!</p>
<span>This is a child component</span><MyComponent class="baz" />Sẽ hiển thị:
<p class="baz">Hi!</p>
<span>This is a child component</span>Bạn có thể tìm hiểu thêm về kế thừa thuộc tính thành phần trong phần Thuộc Tính Chuyển Tiếp.
2. Ràng Buộc Kiểu Nội Dòng
2.1 Ràng Buộc Đến Đối Tượng
:style hỗ trợ ràng buộc đến các giá trị đối tượng JavaScript – nó tương ứng với một Thuộc tính style của phần tử HTML:
const activeColor = ref('red')
const fontSize = ref(30)<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>Mặc dù khuyến nghị sử dụng camelCase cho các key, :style cũng hỗ trợ các key thuộc kiểu kebab-cased (tương ứng với cách chúng được sử dụng trong CSS thực tế) – ví dụ:
<div :style="{ 'font-size': fontSize + 'px' }"></div>Thường là một ý tưởng tốt để ràng buộc trực tiếp đến một đối tượng style để mẫu làm sạch hơn:
const styleObject = reactive({
color: 'red',
fontSize: '13px'
})<div :style="styleObject"></div>Một lần nữa, việc ràng buộc kiểu đối tượng thường được sử dụng kết hợp với các tính năng tính toán trả về đối tượng.
2.2 Ràng Buộc Đến Mảng
Chúng ta có thể ràng buộc :style đến một mảng của nhiều đối tượng style. Những đối tượng này sẽ được hợp nhất và áp dụng cho cùng một phần tử:
<div :style="[baseStyles, overridingStyles]"></div>2.3 Tự động thêm tiền tố
Khi bạn sử dụng một thuộc tính CSS yêu cầu một tiền tố nhà cung cấp trong :style, Vue sẽ tự động thêm tiền tố phù hợp. Vue thực hiện điều này bằng cách kiểm tra tại thời điểm chạy để xem các thuộc tính style nào được hỗ trợ trong trình duyệt hiện tại. Nếu trình duyệt không hỗ trợ một thuộc tính cụ thể, thì các biến thể có tiền tố khác nhau sẽ được thử để tìm một phiên bản được hỗ trợ.
2.4 Giá Trị Nhiều
Bạn có thể cung cấp một mảng của nhiều giá trị (được thêm tiền tố) cho một thuộc tính style, ví dụ:
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>Điều này chỉ hiển thị giá trị cuối cùng trong mảng mà trình duyệt hỗ trợ. Trong ví dụ này, nó sẽ hiển thị display: flex cho các trình duyệt hỗ trợ phiên bản không có tiền tố của flexbox.
Cảm ơn bạn đã tham gia vào hành trình khám phá Vue.js với chúng tôi tại Cafedev. Chúng ta đã tìm hiểu cách sử dụng ràng buộc lớp và kiểu dáng trong Vue.js để tạo ra các ứng dụng web linh hoạt và đẹp mắt hơn. Sự linh hoạt và tiện ích của Vue.js trong việc quản lý giao diện đã giúp chúng ta hiểu rõ hơn về cách tối ưu hóa trải nghiệm người dùng và phát triển ứng dụng một cách hiệu quả. Hãy tiếp tục đồng hành cùng Cafedev để khám phá thêm nhiều điều thú vị khác trong tương lai!
Các nguồn kiến thức MIỄN PHÍ VÔ GIÁ từ cafedev tại đây
Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của CafeDev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
