目錄

• style scoped
  
• style module
  
• 狀態驅動的動態
  
• 總結

style scopeduhMTbSYd

需要注意的有：

• 樣式不會影響到其他元件，只會在當前元件生效。
• 子元件的根元素會同時 受父元件的作用域樣式，和子元件的作用域樣式影響. 這樣做的目的是讓父元件可以調整子元件的佈局。
• 存在3個特殊的選擇器：

1. 深度選擇器：可以影響到子元件. 使用偽類 => :deep(cls: 影響的選擇器)

    .a :deep(.b) {
        ...
    }

2. 插槽選擇器: 可以影響到插槽內容的樣式。使用偽類 => :slotthttp://www.cppcns.com

    :slloted(.a) {
        ...
    }

3. 全域性選擇器: 是樣式影響到全域性。 使用偽類 => :global(選擇器)

    :slloted(.a) {
        ...
    }

scoped style 可以和 style同時存在

style module

style 標籤中帶有 module。其樣式和 style scoped一樣只能作用域於當前元件。

此方式會將css 編譯為 css modules.且暴露給元件$styuhMTbSYdles物件來使用css樣式

<template>
  <p :class="$style.red">
    This should be red
  </p>
</template>

<style module>
.red {
  color: red;
}
</style>
www.cppcns.com
 

可以給module賦值來自定義暴露的物件名稱

<template>
  <p :class="style.red">
    This should be red
  </p>
</template>

<style module='style'>
.red {
  color: red;
}
</style>

在組合式api中可以使用 useCssModule() api來使用cssModule.

// 預設,返回 <style module> 中的類
useCssModule()

// 命名,返回 <style module="classes"> 中的類
useCssModule('classes')

狀態驅動的動態css

可以使用 v-bind() 來將css值關聯到動態的元件狀態上

<template>
  <div class="text">hello</div>
</template>

<script>
export default {
  data() {
    return {
      color: 'red'
    }
  }
}
</script>

<style>
.text {
  color: v-bind(color);
}
</style>

總結

到此這篇關於3單檔案元件中style特性的文章就介紹到這了,更多相關vue3單檔案元件style特性內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！