Bài 12: Class và style binding trong VueJS
Mình đã cập nhật lại tất cả các bài với các thay đổi ở hiện tại ở năm 2024: Vue 3, Vite, Laravel 11x,...
Cập nhật gần nhất: 08/06/2024
Chào mừng các bạn quay trở lại với series học VueJS với Laravel của mình, ở bài trước mình đã hướng dẫn các bạn cách sử dụng $forceUpdate() để re-render lại DOM khi cần thiết. Ở bài này chúng ta sẽ cùng tìm hiểu cách bind style và class cho các thẻ HTML trong VueJS thế nào nhé.
Trong quá trình phát triển đôi khi sẽ có lúc các bạn các bạn muốn thêm một class vào trong một thẻ HTML với một điều kiện nào đó xảy ra, hoặc cũng có thể là muốn dòng text hiển thị có màu tím mộng mơ nhưng chỉ khi cần thiết. Khi đó Vue có thể giúp bạn làm điều này rất dễ dàng.
Class Binding 📚
Binding Với Object
Vue cho phép bạn bind các class bằng cách sử dụng một object. Giá trị của các thuộc tính trong object này là boolean, xác định xem class tương ứng có được áp dụng hay không.
<template>
<div :class="{ active: isActive, 'error-class': hasError }">
Class Binding Example
</div>
<button @click="toggleActive">Toggle Active</button>
<button @click="toggleError">Toggle Error</button>
</template>
<script setup>
import { ref } from 'vue';
const isActive = ref(false);
const hasError = ref(false);
function toggleActive() {
isActive.value = !isActive.value;
}
function toggleError() {
hasError.value = !hasError.value;
}
</script>
<style>
.active {
background-color: blue;
color: white;
}
.error-class {
background-color: red;
color: white;
}
</style>
Trong ví dụ này, khi isActive=false thì CSS class active sẽ không được áp dụng, bấm vào nút toggleActive thì isActive=true và ta sẽ thấy background color đổi thành màu xanh 🔵 hoặc hasError thay đổi, class tương ứng sẽ được thêm vào và ta thấy màu đỏ 🔴.
Ta cũng có thể tính toán CSS class dùng computed (cách này phổ biến và hay được khuyên dùng à nha):
<template>
<div :class="computedClasses">
Class Binding Example
</div>
<button @click="toggleActive">Toggle Active</button>
<button @click="toggleError">Toggle Error</button>
</template>
<script setup>
import { ref, computed } from 'vue';
const isActive = ref(false);
const hasError = ref(false);
function toggleActive() {
isActive.value = !isActive.value;
}
function toggleError() {
hasError.value = !hasError.value;
}
const computedClasses = computed(() => {
return {
active: isActive.value,
'error-class': hasError.value,
};
});
</script>
<style>
.active {
background-color: blue;
color: white;
}
.error-class {
background-color: red;
color: white;
}
</style>
Binding Với Array
Bạn cũng có thể bind các class bằng cách sử dụng một Array:
<template>
<div :class="[isActive ? 'active' : '', hasError ? 'error-class' : '']">
Class Binding Example
</div>
<button @click="toggleActive">Toggle Active</button>
<button @click="toggleError">Toggle Error</button>
</template>
<script setup>
import { ref } from 'vue';
const isActive = ref(false);
const hasError = ref(false);
function toggleActive() {
isActive.value = !isActive.value;
}
function toggleError() {
hasError.value = !hasError.value;
}
</script>
<style>
.active {
background-color: blue;
color: white;
}
.error-class {
background-color: red;
color: white;
}
</style>
Trong ví dụ này, các class được thêm vào mảng dựa trên giá trị của isActive và hasError.
Tương tự với object ta cũng có thể dùng
computedcho phần này, các bạn tự thử xem nhé 😉
Binding Với Ternary Operator
Sử dụng toán tử ba ngôi để kiểm soát class binding:
<template>
<div :class="isActive ? 'active' : 'inactive'">
Ternary Operator Class Binding Example
</div>
<button @click="toggleActive">Toggle Active</button>
</template>
<script setup>
import { ref } from 'vue';
const isActive = ref(false);
function toggleActive() {
isActive.value = !isActive.value;
}
</script>
<style>
.active {
background-color: green;
color: white;
}
.inactive {
background-color: grey;
color: white;
}
</style>
Trong ví dụ này, class active hoặc inactive sẽ được áp dụng dựa trên giá trị của isActive:
Style Binding 🎨
Khá là tương tự với phần class binding, thì với Vue ta cũng có thể bind inline style
Binding Với Object
Bạn có thể bind các style bằng cách sử dụng một object:
<template>
<div :style="{ color: textColor, fontSize: fontSize + 'px' }">
Style Binding Example
</div>
<button @click="changeStyle">Change Style</button>
</template>
<script setup>
import { ref } from 'vue';
const textColor = ref('blue');
const fontSize = ref(16);
function changeStyle() {
textColor.value = textColor.value === 'blue' ? 'red' : 'blue';
fontSize.value = fontSize.value === 16 ? 20 : 16;
}
</script>
Trong ví dụ này, khi bạn nhấn nút "Change Style", màu sắc và kích thước chữ sẽ thay đổi:
Ta cũng có thể dùng
computedcho style binding đó, các bạn tự thử xem thế nào coi nha 😆
Binding Với Array
Vue không hỗ trợ trực tiếp binding style bằng array, nhưng bạn có thể sử dụng một mảng các object style:
<template>
<div :style="[styleObject1, styleObject2]">
Array Style Binding Example
</div>
<button @click="toggleStyle">Toggle Style</button>
</template>
<script setup>
import { ref } from 'vue';
const styleObject1 = ref({ color: 'blue' });
const styleObject2 = ref({ fontSize: '16px' });
function toggleStyle() {
styleObject1.value = styleObject1.value.color === 'blue' ? { color: 'red' } : { color: 'blue' };
styleObject2.value = styleObject2.value.fontSize === '16px' ? { fontSize: '20px' } : { fontSize: '16px' };
}
</script>
Trong ví dụ này, khi bạn nhấn nút "Toggle Style", màu sắc và kích thước chữ sẽ thay đổi:
Dynamic Style Binding
Bạn cũng có thể bind các style dựa trên các biểu thức:
<template>
<div :style="{ backgroundColor: bgColor, padding: paddingSize + 'px' }">
Dynamic Style Binding Example
</div>
<button @click="toggleStyle">Toggle Style</button>
</template>
<script setup>
import { ref } from 'vue';
const bgColor = ref('yellow');
const paddingSize = ref(10);
function toggleStyle() {
bgColor.value = bgColor.value === 'yellow' ? 'green' : 'yellow';
paddingSize.value = paddingSize.value === 10 ? 20 : 10;
}
</script>
Trong ví dụ này, khi bạn nhấn nút "Toggle Style", màu nền và kích thước padding sẽ thay đổi:
Kết Hợp Class Và Style Binding
Bạn có thể kết hợp cả class và style binding trong một phần tử:
<template>
<div :class="{ highlighted: isHighlighted }" :style="{ backgroundColor: bgColor }">
Combined Class and Style Binding Example
</div>
<button @click="toggleHighlight">Toggle Highlight</button>
<button @click="toggleBgColor">Toggle Background Color</button>
</template>
<script setup>
import { ref } from 'vue';
const isHighlighted = ref(false);
const bgColor = ref('lightgray');
function toggleHighlight() {
isHighlighted.value = !isHighlighted.value;
}
function toggleBgColor() {
bgColor.value = bgColor.value === 'lightgray' ? 'lightblue' : 'lightgray';
}
</script>
<style>
.highlighted {
font-weight: bold;
color: darkblue;
}
</style>
Trong ví dụ này, bạn có thể thấy cách kết hợp class và style binding để tạo ra giao diện động và linh hoạt:
Style Binding Với CSS Prefixed Properties
Vue tự động xử lý các thuộc tính CSS prefixed (tiền tố) và chọn thuộc tính phù hợp cho trình duyệt đang sử dụng. Ví dụ, khi bạn sử dụng các thuộc tính như transform, Vue sẽ thêm các tiền tố tương ứng để đảm bảo tính tương thích với các trình duyệt khác nhau.
<template>
<div :style="computedStyles" class="box">
Multiple Prefixed Properties Example
</div>
<button @click="toggleTransform">Toggle Transform</button>
</template>
<script setup>
import { ref, computed } from 'vue';
const isTransformed = ref(false);
function toggleTransform() {
isTransformed.value = !isTransformed.value;
}
const computedStyles = computed(() => {
return {
transform: isTransformed.value ? 'rotate(20deg)' : 'none',
WebkitTransform: isTransformed.value ? 'rotate(20deg)' : 'none', // Safari
msTransform: isTransformed.value ? 'rotate(20deg)' : 'none', // IE 9
};
});
</script>
<style>
.box {
width: 100px;
height: 100px;
background-color: lightblue;
transition: transform 0.3s;
}
</style>
Chạy lên sẽ cho ta kết quả như sau:
Tuỳ vào trình duyệt thì Vue sẽ lựa chọn thuộc tính phù hợp nhất, các bạn có thể thử lại với các trình duyệt khác như Firefox, Safari, Edge hay IE xem nhé
Kết luận
Class và style binding trong Vue 3 là những công cụ mạnh mẽ giúp bạn tạo ra các giao diện người dùng phong phú và tương tác. Hy vọng qua bài viết này, bạn đã nắm vững cách sử dụng và kết hợp các phương pháp binding class và style trong Vue 3.
Ở bài tiếp theo chúng ta sẽ cùng tìm hiểu về cách Form input binding nhé.
Cám ơn các bạn đã theo dõi, nếu có gì thắc mắc các bạn để lại dưới phần comment nha ^^!
All rights reserved
