Vue, cách sử dụng một prop làm tên lớp

Đô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àcolorvà 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ộtcarlớ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