在本文中,我們將探討多種使用 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>
:style
是 v-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+)。