Đôi khi bạn chuyển một giá trị hỗ trợ cho một thành phần và bạn muốn sử dụng giá trị hỗ trợ đó làm tên lớp. Làm thế nào để làm điều đó?
Giả sử bạn có một thành phần Xe hơi.
Bạn muốn thêm một lớp vào đầu ra của nó dựa trên một giá đỡ.
Vì vậy, có thể chỗ dựa được gọi làcolor
và bạn sử dụng nó như thế này trong các phần khác của ứng dụng:
<Car color="red">
<Car color="blue">
Trong thành phần Xe hơi của bạn, trước tiên, bạn cần khai báo màu hỗ trợ:
<script>
export default {
name: 'Car',
props: {
color: String
}
}
</script>
thì bạn có thể sử dụng nó trong phần mẫu:
<template>
<div :class="color"></div>
</template>
Nếu bạn muốn thêm mộtcar
lớp, cộng với lớp được xác định bởi color prop, bạn có thể sử dụng cú pháp này:
<template>
<div :class="['car', color]"></div>
</template>
Chúc bạn viết mã vui vẻ!
Tải xuống miễn phí của tôiSổ tay Vue
Các hướng dẫn vue khác:
- Tổng quan về Vue.js
- Vue.js CLI: tìm hiểu cách sử dụng nó
- Công cụ dành cho nhà phát triển Vue.js
- Cấu hình mã VS để phát triển Vue
- Tạo ứng dụng đầu tiên của bạn với Vue.js
- Các thành phần tệp đơn của Vue.js
- Các mẫu và nội suy Vue.js
- Chỉ thị Vue.js
- Phương thức Vue.js
- Thuộc tính được tính toán của Vue.js
- Tạo kiểu các thành phần Vue.js bằng CSS
- Người theo dõi Vue.js
- Phương thức Vue so với người theo dõi so với thuộc tính được tính
- Bộ lọc Vue.js
- Các thành phần của Vue.js
- Vue.js Slots
- Đạo cụ thành phần Vue.js
- Sự kiện của Vue.js
- Giao tiếp các thành phần Vue.js
- Vuex, Giám đốc Nhà nước Vue.js
- Vue, sử dụng một thành phần bên trong một thành phần khác
- Vue, cách sử dụng một prop làm tên lớp
- Cách sử dụng SCSS với Vue.js Single File Components
- Sử dụng Tailwind với Vue.js
- Bộ định tuyến Vue
- Tự động hiển thị một thành phần Vue
- Trang Cheat Vue.js
- Lưu trữ dữ liệu Vue vào localStorage bằng Vuex
- Cách áp dụng động một lớp bằng Vue
- Vue, cách sử dụng v-model
- Vue, tại sao dữ liệu phải là một hàm
- Roadmap to become a Vue.js developer in 2020