如何在vue的style標籤中使用js？

car_Jun發表於2024-03-16
VueJS

這是面試的時候遇到的一個面試題，當時沒回答上來。。。
var() - CSS：層疊樣式表 | MDN
自定義屬性（--*）：CSS 變數 - CSS：層疊樣式表 | MDN
我們先了解一下 css var()函式以及 css 自定義屬性
透過 var 函式和自定義屬性可以複用某些 css 樣式，例如：

:root {
  --main-bg-color: pink;
}

body {
  background-color: var(--main-bg-color);
}

.text {
  background-color: var(--main-bg-color)
}

當然 var()函式是有作用域的，讀取順序 內聯自定義屬性 => class 自定義屬性 => root 自定義屬性

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      :root {
        --color: pink;
      }

      .text {
        --color: red;
        color: var(--color);
      }
    </style>
  </head>
  <body>
    <!-- 優先讀取內聯自定義屬性 -->
    <div class="text" style="--color: blue">hello</div>
  </body>
</html>

那如何在 vue style 標籤中使用響應式變數呢？

方法一：v-bind:style + var()

<template>
  <div class="text" :style="{ '--color': color }">hello</div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const color = ref('red')

onMounted(() => {
  setTimeout(() => {
    color.value = 'pink'
  }, 1000)
})
</script>

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

原理：透過繫結元素的 style 建立自定義屬性，使用 var()函式訪問建立的自定義屬性

方法二：透過 v-bind CSS 函式將 CSS 的值連結到變數上，且支援 JavaScript 表示式（需要用引號包裹起來，支援模板字串）

<template>
  <p>hello</p>
</template>

<script setup>
  const theme = {
    color: 'red'
  }
</script>

<style scoped>
  p {
    color: v-bind('theme.color'); /* 繫結某個變數 */
  }
</style>

<template>
  <p>hello</p>
</template>

<script setup>
  const colorNum = 1
</script>

<style scoped>
  p {
    color: v-bind('colorNum > 1 ? ' blue': ' pink''); /* 支援JavaScript表示式 */
  }
</style>

原理：vue 會將 v-bind 的值編譯成雜湊化的 CSS 自定義屬性，並透過內聯的方式應用到元件的根結點上，內部再透過 var() 函式使用（方法二其實就是方法一的語法糖，簡化了內部操作）

相關文章