Posted on Oct 24 In Vue it's possible to manipulate Style of your components for assign dynamic value and create custom effects.In this article will explain how to use this powerful feature.Let's start! 🤙For data binding it's necessary the v-model directive (if you don't remember or don't know, you can read this article).There are two ways for use the style binding: Binding to Objects or Binding to Array.Let's start with the first one.text-danger is a CSS class and will be rendered when hasError will be true.Yes, hasError is a simply JavaScript boolean value, in this case wrapped by ref(), but it's possible use anything JavaScript expression, for example:Computed properties are welcome and it's possible use it, in this way:We can bind :class to an array to apply a list of classes in this way:This is the simplest example of using Arrays.As for Object it's possible use anything JavaScript expression:As for class, there are same ways for binding custom style.Although camelCase keys are recommended, :style also supports kebab-cased CSS property keys,for example:To keep clean code, it's a good idea declare an object for style the code in this way:Again, object style binding is often used in conjunction with computed properties that return objects.We can bind :style to an array of multiple style objects. These objects will be merged and applied to the same element:When you use a CSS property that requires a vendor prefix Vue will automatically add the appropriate prefix: it does this by checking at runtime to see which style properties are supported in the current browser. If the browser doesn't support a particular property then various prefixed variants will be tested to try to find one that is supported.Vue provides style binding to make your components custom, giving you the ability to create and manipulate the app's style at runtime.Feature not to be underestimated given its power.Happy coding!✨Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Adeleye Ayodeji - Oct 5 Xing Wang - Oct 9 christopher - Oct 18 Davi Jonck - Oct 5 Once suspended, dvalin99 will not be able to comment or publish posts until their suspension is removed. Once unsuspended, dvalin99 will be able to comment and publish posts again. Once unpublished, all posts by dvalin99 will become hidden and only accessible to themselves. If dvalin99 is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Domenico Tenace. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag dvalin99: dvalin99 consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging dvalin99 will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.