[Vuejs]-Is it possible to dynamically specify the class name in styles?

by

0👍

@Ilya Degtyarenko
You can specify your classes in the styles and use it like this:

<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👍

Under the hood, the v-bind in style creates a CSS variable that can be updated in style attribute of the element and used as value in the CSS rule :

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

and

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

and it’s not possible to use CSS var as class name.

Leave a comment