Vue.js 是一款流行的前端框架，其中一個強大的功能就是可以使用 CSS 樣式來控制網頁的外觀。下面我們來看看如何使用 Vue.js 實現 CSS 樣式。

/* 在 Vue.js 中使用 CSS 樣式 */
/* 在 Vue.js 中使用普通的 CSS 樣式 */
/* 首先在 HTML 模板中添加一個 class 名稱 */
<div class="my-class">這是一個 DIV 元素</div>
/* 在樣式表中添加對該 class 名稱的定義 */
.my-class {
color: red;
font-size: 24px;
}
/* 然后在 Vue.js 模板中綁定該 class 名稱 */
<div class="my-class" :class="{ 'my-other-class' : isActive }">這是一個 DIV 元素</div>
/* 這樣可以動態地添加或移除樣式類名稱 */
/* 在 Vue.js 中使用 scoped CSS 樣式 */
/* 在樣式表中添加一個 scoped 屬性 */
<style scoped>
.my-class {
color: red;
font-size: 24px;
}
</style>
/* 這樣可以將樣式僅應用于當前組件 */
/* 在 Vue.js 中使用 CSS 模塊 */
/* 在樣式表中使用 @module 關鍵字 */
<style module>
.my-class {
color: red;
font-size: 24px;
}
</style>
/* 在 Vue.js 模板中綁定樣式 */
<div :class="[$style.myClass, 'my-other-class']">這是一個 DIV 元素</div>
/* 在 Vue.js 組件中引入樣式 */
import styles from './styles.module.css';
export default {
name: 'MyComponent',
styles
}
/* 這樣可以將樣式封裝在組件中，不會影響其他組件 */