Vue.js 中設定樣式有四種方法:使用內聯樣式、局部(scoped)樣式、Sass/SCSS 預處理器以及 CSS 模組。內嵌樣式直接寫入範本;局部樣式僅適用於目前元件;Sass/SCSS 提供更強大的樣式編寫功能;CSS 模組產生唯一類別名稱避免衝突。
Vue 中設定樣式的方法
在Vue.js 中,可以使用多種方法為元件和元素添加樣式。
1. 內嵌樣式
內聯樣式直接寫入元件模板,是最簡單的樣式設定方法。
Hello World
2. 局部樣式(scoped)
scoped 樣式僅適用於目前元件及其內部元素,可防止樣式污染。
Hello World
3. Sass/SCSS
Sass 和 SCSS 是 CSS 預處理器,可以在 Vue.js 中使用來編寫更強大的樣式。
// main.scss .my-component { color: #f00; font-size: 1.2rem; }
Hello World
4. CSS 模組
CSS 模組透過產生唯一的類別名稱來防止樣式衝突,通常與 webpack 一起使用。
// App.vue import styles from './App.module.css'; export default { render() { return ( Hello World ); } }
// App.module.css .myClass { color: green; text-align: center; }
以上是vue中用來設定樣式的方法是的詳細內容。更多資訊請關注PHP中文網其他相關文章!