Tạo kiểu thông qua thuộc tính style trong Vue

Có thể thêm trực tiếp CSS styles thông qua thuộc tính style. Để làm điều này, một đối tượng được truyền vào thuộc tính, trong đó các CSS properties mong muốn phải là keys của đối tượng này, còn các giá trị tương ứng của CSS properties - là values của đối tượng đó.

Hãy thử ví dụ tô màu một đoạn văn nào đó thành màu đỏ và thêm đường viền màu xanh lá cây cho nó:

<template>
	<p :style="{color: 'red', border: '1px solid green'}">
		text
	</p>
</template>

Bây giờ hãy thay vì đường viền thì thiết lập font-size thành 30px. Vì trong đối tượng không thể có key với dấu gạch ngang, chúng ta phải đặt nó trong dấu ngoặc kép:

<template>
	<p :style="{color: 'red', 'font-size': '30px'}">
		text
	</p>
</template>

Cũng có thể thay vì font-size thì viết fontSize - điều này cũng sẽ hoạt động:

<template>
	<p :style="{color: 'red', fontSize: '30px'}">
		text
	</p>
</template>

Cho một đoạn văn. Hãy tô màu chữ của nó thành xanh lá cây và nền của nó - thành màu vàng.

Cho một đoạn văn. Hãy làm cho chữ của nó đậm và in nghiêng.