vue.js 是否可以在样式中动态指定类名？

oxalkeyp 于 2023-04-12 发布在 Vue.js

关注(0)|答案(2)|浏览(183)

我需要将类名从脚本传递到样式

<script
    lang="ts"
    setup
>
    const className = ref('some-class')
</script>

<style
    lang="sass"
    module
>
    .#{v-bind(className)}--dynamic
        pointer-events: none
</style>

在这种情况下，我得到一个错误：错误：应为选择器。.v-bind（className）--dynamic ━插值输出错误

vue.js

来源：https://stackoverflow.com/questions/75975203/is-it-possible-to-dynamically-specify-the-class-name-in-styles

2条答案

按热度按时间

gab6jxml1#

@Ilya Degtyarenko您可以在样式中指定您的类，并像这样使用它：

<template>
  <div :class="[someClass]">
  </div>
</template>

<script setup lang="ts">
  const a = 10
  const someClass = a === 10 ? "success" : "error"
</script>

<style lang="scss">
.success {
}
.error {
}
</style>

赞(0）回复(0）举报 2023-04-12

xt0899hw2#

在后台，style中的v-bind创建了一个CSS variable，它可以在元素的style属性中更新，并用作CSS规则中的值：

<p  style="--469af010-theme_color:red;">hello</p>

和

p {
    color: var(--469af010-theme_color);
}

不能使用CSS var作为类名。

赞(0）回复(0）举报 2023-04-12

我来回答

vue.js 是否可以在样式中动态指定类名？

2条答案

相关问题

热门标签

最新问答