Dynamic Style Binding in Vue

This is a post to show you how to bind a reactive value to css style which is also scoped , you could achieve great many things with it

This is what we are going to create 👇🏻

A random quote generator with random style bindings , I have used charles dicken's quotes ,since I am a big fan of his writings 🫧🫡🪄

<script setup>
const colors = [
  '#FAD02E',
  '#F28D35',
  '#D83367',
  '#4D5B5E',
  '#84C5C7',
  '#F6D8AE',
  '#E6B0AA',
  '#B5D0D0',
  '#D5A6BD',
  '#B1C2D4',
];
const sizes = ['12px', '16px', '20px', '24px', '28px', '32px', '36px'];
const quotes = [
  'It was the best of times, it was the worst of times...',
  'We are all in the gutter, but some of us are looking at the stars.',
  'Please, sir, I want some more.',
  'I am what I am! I’m David Copperfield!',
  'The one great principle of English law is to make business for itself.',
];
const borders = ['solid 2px', 'dotted 3px', 'dashed 2px', 'double 4px'];
const textAlignments = ['left', 'center', 'right'];
const fontFamilies = ['Arial', 'Verdana', 'Tahoma', 'Courier New', 'Georgia'];
const paddings = ['5px', '10px', '15px', '20px', '25px'];
const margins = ['5px', '10px', '15px', '20px', '25px'];
const letterSpacings = ['0px', '1px', '2px', '3px', '4px'];
const lineHeights = ['1.2', '1.5', '1.8', '2.0', '2.5'];
const shadowEffects = [
  '0px 4px 6px rgba(0, 0, 0, 0.1)',
  '0px 8px 12px rgba(0, 0, 0, 0.2)',
  '0px 10px 20px rgba(0, 0, 0, 0.3)',
  '0px 2px 4px rgba(0, 0, 0, 0.05)',
  '0px 4px 10px rgba(0, 0, 0, 0.15)',
];
const opacities = ['0.5', '0.6', '0.7', '0.8', '0.9'];

const color = ref('#CCC');
const fontSize = ref('16px');
const quote = ref('Click to Inspire!');
const border = ref('solid 2px');
const textAlign = ref('left');
const fontFamily = ref('Arial');
const padding = ref('10px');
const margin = ref('10px');
const letterSpacing = ref('0px');
const lineHeight = ref('1.5');
const shadow = ref('0px 4px 6px rgba(0, 0, 0, 0.1)');
const opacity = ref('1');

const randomObject = () => {
  color.value = colors[Math.floor(Math.random() * colors.length)];
  fontSize.value = sizes[Math.floor(Math.random() * sizes.length)];
  quote.value = quotes[Math.floor(Math.random() * quotes.length)];
  border.value = borders[Math.floor(Math.random() * borders.length)];
  textAlign.value =
    textAlignments[Math.floor(Math.random() * textAlignments.length)];
  fontFamily.value =
    fontFamilies[Math.floor(Math.random() * fontFamilies.length)];
  padding.value = paddings[Math.floor(Math.random() * paddings.length)];
  margin.value = margins[Math.floor(Math.random() * margins.length)];
  letterSpacing.value =
    letterSpacings[Math.floor(Math.random() * letterSpacings.length)];
  lineHeight.value =
    lineHeights[Math.floor(Math.random() * lineHeights.length)];
  shadow.value =
    shadowEffects[Math.floor(Math.random() * shadowEffects.length)];
  opacity.value = opacities[Math.floor(Math.random() * opacities.length)];
};
</script>

<template>
  <div>
    <button @click="randomObject" class="btn-style">
      {{ quote }}
    </button>
  </div>
</template>

<style scoped>
* {
  background-color: v-bind(color);
  font-size: v-bind(fontSize);
  border: v-bind(border);
  text-align: v-bind(textAlign);
  font-family: v-bind(fontFamily);
  padding: v-bind(padding);
  margin: v-bind(margin);
  letter-spacing: v-bind(letterSpacing);
  line-height: v-bind(lineHeight);
  box-shadow: v-bind(boxShadow);
  opacity: v-bind(opacity);
  transition: all 0.3s ease;
}
</style>

In the example above, the button's style's are dynamically updated when the user clicks it,

please look at the randomObject() function , it generates random value and injects to the reactive values ,then the binded styles gets updated

thanks to Vue’s v-bind

Start experimenting with dynamic styles in your Vue components, and enjoy building more dynamic, visually appealing applications!

Happy coding :)

kiri...