If you use Vue, you might be used to having to apply different classes to tags based on the logic in your code. That's because we might want to reactively update an element’s class based on when certain conditions. For example, suppose a variable is set to true, we want a to show as , but otherwise, it should be . For such use cases, it's common to see the following code: check div red blue <div :class="check === true ? 'red' : 'blue'">
    Hello World
</div> Did you know, however, that you can actually put Vue reactive variables straight in your CSS with Vue 3? We have to use the composition API ( ), but once we do, we can avoid the code below and put our variable straight in our CSS. read more: difference between composition and options API . Suppose we have the following script in our Vue template: Let's look at a simple example <script setup>
import { ref } from 'vue'

const check = true;
let color = ref('#ff0000');
  
if(check == true) {
  color.value = '#0000ff';
}
</script>
<template>
  <input value="Hello World" />
</template> Simple, right? If is , the variable is ' '. Otherwise, it's ' '. In our CSS, with Vue 3, we can now directly reference by using : check true color #0000ff #ff0000 color v-bind <style>
  input {
    color: v-bind(color)
  }
</style> Now if updates reactively, the of input will change to whatever the variable is set to. That means you can avoid some awkward logic in your HTML tags, and start using Javascript variables straight in your CSS - and I think that's pretty cool. color color color Also Published here

2022 - HackerNoon Contributor of the Year - Coding

2022 - HackerNoon Contributor of the Year - Coding Skills

2022 - HackerNoon Contributor of the Year - Java

2022 - HackerNoon Contributor of the Year - Javascript

2022 - HackerNoon Contributor of the Year - Website Development

2022 - Tip Your Hat Tutorials Best Tutorials

Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Coding

Nominated for 2022 - HackerNoon Contributor of the Year - Coding Skills

Nominated for 2022 - Tip Your Hat Tutorials Best Tutorials

Nominated for 2022 - HackerNoon Contributor of the Year - Java

Nominated for 2022 - HackerNoon Contributor of the Year - Website Development

Nominated for Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Typescript

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

How to Create Dynamic CSS Using Vue Reactive Variables

How to Create Dynamic CSS Using Vue Reactive Variables

Too Long; Didn't Read

Johnny Simpson

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How to Create Dynamic CSS Using Vue Reactive Variables

Too Long; Didn't Read

Johnny Simpson

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES