使用CSS樣式化Vue.js組件

了解使用CSS設置Vue.js組件樣式的所有選擇

注意:本教程使用Vue.js單個文件組件

將CSS添加到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>

您可以像上面的示例中那樣對類進行硬編碼,也可以將類綁定到組件屬性以使其具有動態性,並且僅在data屬性為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>,您可以直接綁定一個字符串,該字符串將引用一個data屬性:

<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.[propertyName],而在模板中,將數據屬性方便地放置為第一級屬性。

Vue將處理任何未像第一個示例中那樣進行硬編碼的CSS,Vue會為我們自動為CSS加上前綴,因此我們可以編寫乾淨的CSS,同時仍然以較舊的瀏覽器為目標(這仍然意味著Vue的瀏覽器)支持,因此IE9 +)

免費下載我的Vue手冊


更多vue教程: