When I started using Vue.js as a front-end framework I immediately enjoyed the easy way I can set up and manage my components. Using single file components let me focus on all aspects regarding the way I build them: I simply need to put 3 tags inside a .vue file and I can start shaping both the visual aspect and all the logic behind the component itself. Talking about styling, the first thing that the official doc tells you is how to style a component: simply insert a style tag (usually at the end of the file) and you're done.
But when you move on and start to build complex interfaces, you immediately need to perform styling that goes beyond the simple composition of CSS classes. So, during my journey, I discovered several ways to perform dynamic styling, and this article aims to be a short reference for people that come up at first with this need.
In order to show you the different techniques, I'll use a super-simple button component that must use a specific background color value if a boolean prop is true (ok maybe is too simple, but so you'll grasp the concepts quickly).
Let's start with the component code: