使用 CSS 去設計 Vue.js 元件
在本文中，我們將探討多種使用 CSS 去設計 Vue.js 元件的方式。
注意: 本教程使用 Vue.js 的單文件元件
最簡單的方式是在 Vue.js 元件中使用 style 標籤，就像在 HTML 中一樣：
1
2
3
4
5
6
7
8
9
10
11
12
13
| <template>
<p style="text-decoration: underline">Hi!</p>
</template>
<script>
export default {
data() {
return {
decoration: 'underline'
}
}
}
</script>
|
這是最靜態的方式。如果你希望 underline 在元件的資料中被定義，你可以這樣做：
1
2
3
4
5
6
7
8
9
10
11
12
13
| <template>
<p :style="{'text-decoration': decoration}">Hi!</p>
</template>
<script>
export default {
data() {
return {
decoration: 'underline'
}
}
}
</script>
|
:style 是 v-bind:style 的縮寫。在本教程中，我將使用這個縮寫。
注意到我們必須將 text-decoration 用引號包起來。這是因為其中有連字符，而連字符不是有效的 JavaScript 識別符號。
你可以避免使用引號，使用 Vue.js 提供的特殊 camelCase 語法，並將其改寫為 textDecoration：
1
2
3
| <template>
<p :style="{textDecoration: decoration}">Hi!</p>
</template>
|
除了將對象綁定到 style 屬性外，你還可以引用計算屬性：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <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 選擇器以設計它：
1
2
3
4
5
6
7
| <template>
<p class="underline">Hi!</p>
</template>
<style>
.underline { text-decoration: underline; }
</style>
|
你也可以像這樣使用 SCSS：
1
2
3
4
5
6
7
8
9
| <template>
<p class="underline">Hi!</p>
</template>
<style lang="scss">
body {
.underline { text-decoration: underline; }
}
</style>
|
你可以硬編碼類名，就像上面的例子一樣，或者你可以將類綁定到元件的屬性上，使其具有動態性，並且只在屬性為 true 時應用到該類：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <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 不同，你可以直接將字符串綁定，并且它將引用元素的資料屬性：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <template>
<p :class="paragraphClass">Hi!</p>
</template>
<script>
export default {
data() {
return {
paragraphClass: 'underline'
}
}
}
</script>
<style>
.underline { text-decoration: underline; }
</style>
|
你可以分配多個類，可以在這種情況下將兩個類添加到 paragraphClass 上，也可以使用數組：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <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>
|
你也可以在類綁定中使用嵌入的對象來完成相同的操作：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <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>
|
你還可以結合這兩種語法：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <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 類時非常有用：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| <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+）。
tags: [“Vue.js”, “CSS”, “styling”, “components”, “SCSS”, “HTML”]