Using v-bind on styles with Vue 3

Comments (0)

Views (232)

Since I started using Vue with version 3, I don't know exactly what I missed in the other 2 versions, but the innovations in version 3 excite me.

It's nice to be able to dynamically use v-bind inside <style> tags.

For example;

<script setup>
import { ref } from "vue"

const textColor = ref('blue')

const changeColor = () => {
    textColor.value = 'red'
}
</script>

<template>
    
    <h3>phpexample.net</h3>
    <button @click="changeColor">change color</button>
    
</template>

<style>
h3 {
    color: v-bind(textColor)
}
</style>

that's it :)

When you are stuck while you are coding or when you need to relax yourself comment section is waiting for you. Ask what you don't know, answer what you know !