Vue 3 ile stillerde v-bind kullanımı

Vue kullanmaya 3. versiyonu ile başladığım için aslında diğer 2 versiyonda neler kaçırdığımı tam bilemesemde 3. versiyodaki yenilikler beni heyecanlandırıyor.

Öyle ki, v-bind'i <style> tagları içinde dinamik olarak kullanabilmek oldukça hoş bir özellik.

Örnek vermek gerekirse;

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

const textColor = ref('blue')

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

<template>
    
    <h3>prototurk.com</h3>
    <button @click="changeColor">Rengi değiştir</button>
    
</template>

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

Editörde Görüntüle

sonuç