Tạo kiểu các thành phần Vue.js bằng CSS

Tìm hiểu tất cả các tùy chọn theo ý của bạn để tạo kiểu các thành phần Vue.js bằng CSS

Lưu ý: hướng dẫn này sử dụng Vue.js Single File Components

Tùy chọn đơn giản nhất để thêm CSS vào thành phần Vue.js là sử dụngstyle, giống như trong HTML:

<template>
  <p style="text-decoration: underline">Hi!</p>
</template>

<script> export default { data() { return { decoration: ‘underline’ } } } </script>

Đây là mức tĩnh nhiều nhất bạn có thể nhận được. Nếu bạn muốn thì saounderlineđược xác định trong dữ liệu thành phần? Đây là cách bạn có thể làm điều đó:

<template>
  <p :style="{'text-decoration': decoration}">Hi!</p>
</template>

<script> export default { data() { return { decoration: ‘underline’ } } } </script>

:stylelà cách viết tắt củav-bind:style. Tôi sẽ sử dụng tốc ký này trong suốt hướng dẫn này.

Chú ý cách chúng tôi phải quấntext-decorationtrích dẫn. Điều này là do dấu gạch ngang, không phải là một phần của mã định danh JavaScript hợp lệ.

Bạn có thể tránh trích dẫn bằng cách sử dụng cú pháp camelCase đặc biệt mà Vue.js cho phép và viết lại nó thànhtextDecoration:

<template>
  <p :style="{textDecoration: decoration}">Hi!</p>
</template>

Thay vì ràng buộc một đối tượng vớistyle, bạn có thể tham chiếu một thuộc tính được tính toán:

<template>
  <p :style="styling">Hi!</p>
</template>

<script> export default { data() { return { textDecoration: ‘underline’, textWeight: ‘bold’ } }, computed: { styling: function() { return { textDecoration: this.textDecoration, textWeight: this.textWeight } } } } </script>

Các thành phần Vue tạo ra HTML thuần túy, vì vậy bạn có thể chọn thêm một lớp vào từng phần tử và thêm một bộ chọn CSS tương ứng với các thuộc tính tạo kiểu cho nó:

<template>
  <p class="underline">Hi!</p>
</template>

<style> .underline { text-decoration: underline; } </style>

Bạn có thể sử dụng SCSS như sau:

<template>
  <p class="underline">Hi!</p>
</template>

<style lang=“scss”> body { .underline { text-decoration: underline; } } </style>

Bạn có thể mã hóa cứng lớp như trong ví dụ trên hoặc bạn có thể liên kết lớp với một thuộc tính thành phần, để làm cho nó động và chỉ áp dụng cho lớp đó nếu thuộc tính dữ liệu là true:

<template>
  <p :class="{underline: isUnderlined}">Hi!</p>
</template>

<script> export default { data() { return { isUnderlined: true } } } </script>

<style> .underline { text-decoration: underline; } </style>

Thay vì ràng buộc một đối tượng với lớp, như chúng ta đã làm với<p :class="{text: isText}">Hi!</p>, bạn có thể liên kết trực tiếp một chuỗi và điều đó sẽ tham chiếu đến thuộc tính dữ liệu:

<template>
  <p :class="paragraphClass">Hi!</p>
</template>

<script> export default { data() { return { paragraphClass: ‘underline’ } } } </script>

<style> .underline { text-decoration: underline; } </style>

Bạn có thể chỉ định nhiều lớp hoặc thêm hai lớp vàoparagraphClasstrong trường hợp này hoặc bằng cách sử dụng một mảng:

<template>
  <p :class="[decoration, weight]">Hi!</p>
</template>

<script> export default { data() { return { decoration: ‘underline’, weight: ‘weight’, } } } </script>

<style> .underline { text-decoration: underline; } .weight { font-weight: bold; } </style>

Điều tương tự cũng có thể được thực hiện bằng cách sử dụng một đối tượng được nội tuyến trong lớp ràng buộc:

<template>
  <p :class="{underline: isUnderlined, weight: isBold}">Hi!</p>
</template>

<script> export default { data() { return { isUnderlined: true, isBold: true } } } </script>

<style> .underline { text-decoration: underline; } .weight { font-weight: bold; } </style>

Và bạn có thể kết hợp hai câu lệnh:

<template>
  <p :class="[decoration, {weight: isBold}]">Hi!</p>
</template>

<script> export default { data() { return { decoration: ‘underline’, isBold: true } } } </script>

<style> .underline { text-decoration: underline; } .weight { font-weight: bold; } </style>

Bạn cũng có thể sử dụng thuộc tính tính toán trả về một đối tượng, hoạt động tốt nhất khi bạn có nhiều lớp CSS để thêm vào cùng một phần tử:

<template>
  <p :class="paragraphClasses">Hi!</p>
</template>

<script> export default { data() { return { isUnderlined: true, isBold: true } }, computed: { paragraphClasses: function() { return { underlined: this.isUnderlined, bold: this.isBold } } } } </script>

<style> .underlined { text-decoration: underline; } .bold { font-weight: bold; } </style>

Lưu ý rằng trong thuộc tính tính toán, bạn cần tham chiếu dữ liệu thành phần bằng cách sử dụngthis.[propertyName], trong khi trong các thuộc tính dữ liệu mẫu được đặt một cách thuận tiện dưới dạng thuộc tính cấp một.

Bất kỳ CSS nào không được mã hóa cứng như trong ví dụ đầu tiên sẽ được xử lý bởi Vue và Vue thực hiện công việc tuyệt vời là tự động tạo tiền tố CSS cho chúng tôi, vì vậy chúng tôi có thể viết CSS sạch trong khi vẫn nhắm mục tiêu các trình duyệt cũ hơn (vẫn có nghĩa là các trình duyệt mà Vue hỗ trợ, vì vậy IE9 +)

Tải xuống miễn phí của tôiSổ tay Vue


Các hướng dẫn vue khác: