如何在vue的style标签中使用js？

这是面试的时候遇到的一个面试题，当时没回答上来。。。
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() 函数使用（方法二其实就是方法一的语法糖，简化了内部操作）

posted @ 2024-03-16 11:26  car_Jun  阅读(280)  评论(0)    收藏  举报