Forgive my lack of expertise, but I am interested in learning more about utilizing dynamic variables and CSS within Vue. I have a concept in mind where pressing a button would result in the letters of the button label spacing out further.
Is it feasible to incorporate a counter script inside a component like this:
<script>
export default {
name: 'Counter',
data() {
return {
count: 3,
}
},
methods: {
increment() {
this.count += 1;
}
}
}
</script>
And then use the integer value of count to adjust CSS text spacing? For instance, could I implement something like this in the template:
<template>
<header>
<div>
<button class="header_button" style="letter-spacing: `v-bind(count) + ch`;">MYBUTTON</button>
</div>
</header>
</template>
I understand that this may seem unusual and specific, but any insights on why this approach may not be working or suggestions on alternative methods would be greatly appreciated.