在本文中,我們將探討多種使用 CSS 去設計 Vue.js 元件的方式。

注意: 本教程使用 Vue.js 的單文件元件

最簡單的方式是在 Vue.js 元件中使用 style 標籤,就像在 HTML 中一樣:

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

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

這是最靜態的方式。如果你希望 underline 在元件的資料中被定義,你可以這樣做:

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

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

:stylev-bind:style 的縮寫。在本教程中,我將使用這個縮寫。

注意到我們必須將 text-decoration 用引號包起來。這是因為其中有連字符,而連字符不是有效的 JavaScript 識別符號。

你可以避免使用引號,使用 Vue.js 提供的特殊 camelCase 語法,並將其改寫為 textDecoration

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

除了將對象綁定到 style 屬性外,你還可以引用計算屬性:

<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>

Vue 的元件生成純 HTML,因此你可以選擇為每個元素添加一個類,並添加對應的 CSS 選擇器以設計它:

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

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

你也可以像這樣使用 SCSS:

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

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

你可以硬編碼類名,就像上面的例子一樣,或者你可以將類綁定到元件的屬性上,使其具有動態性,並且只在屬性為 true 時應用到該類:

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

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

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

<p :class="{text: isText}">Hi!</p> 中綁定對象到 class 不同,你可以直接將字符串綁定,并且它將引用元素的資料屬性:

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

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

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

你可以分配多個類,可以在這種情況下將兩個類添加到 paragraphClass 上,也可以使用數組:

<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>

你也可以在類綁定中使用嵌入的對象來完成相同的操作:

<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>

你還可以結合這兩種語法:

<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>

你還可以使用一個返回對象的計算屬性,這在需要向同一元素添加多個 CSS 類時非常有用:

<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>

請注意,在計算屬性中,你需要使用 this.[屬性名稱] 引用組件的資料,而在模板中,資料屬性通常作為一級屬性放置。

除了第一個示例中的硬編碼樣式外,其他樣式都會經過 Vue 的處理,Vue 會自動為我們添加 CSS 的前綴,因此我們可以使用乾淨的 CSS 代碼來設計我們的元件,同時仍然支援舊版瀏覽器(也就是 Vue 支援的瀏覽器,包括 IE9+)。