Tạo kiểu theo phạm vi
Kiểu dáng được xác định bên trong thẻ <style> trong một thành phần hoặc trong App.vue thực sự có sẵn trên toàn cầu trong tất cả các thành phần.
Để giữ kiểu dáng được giới hạn cục bộ chỉ ở thành phần, chúng ta có thể sử dụng thuộc tính scope trên thành phần đó: <style scoped>
Kiểu dáng toàn cầu
CSS được viết bên trong thẻ <style> trong bất kỳ tệp *.vue nào đều hoạt động trên toàn cầu.
Điều này có nghĩa là nếu chúng ta đặt các thẻ <p> có màu nền hồng bên trong thẻ <style> trong một tệp *.vue , thì điều này sẽ ảnh hưởng đến các thẻ <p> trong tất cả các tệp *.vue trong dự án đó.
Ví dụ
Trong ứng dụng này, chúng ta có ba tệp *.vue : App.vue và hai thành phần CompOne.vue và CompTwo.vue .
Kiểu CSS bên trong CompOne.vue ảnh hưởng đến thẻ <p> trong cả ba tệp *.vue :
<template>
<p>This p-tag belongs to 'CompOne.vue'</p>
</template>
<script></script>
<style>
p {
background-color: pink;
width: 150px;
}
</style>
Chạy ví dụ »Tạo kiểu theo phạm vi
Để tránh việc kiểu dáng trong một thành phần ảnh hưởng đến kiểu dáng của các phần tử trong các thành phần khác, chúng tôi sử dụng thuộc tính 'scoped' trên thẻ <style> :
Ví dụ
Thẻ <style> trong CompOne.vue được cung cấp thuộc tính scoped :
<template>
<p>This p-tag belongs to 'CompOne.vue'</p>
</template>
<script></script>
<style scoped >
p {
background-color: pink;
width: 150px;
}
</style>
Chạy ví dụ »