Vue helps you style your website or application in a few ways.
v-bind:style both have special helpers to help you set the class attribute and inline styles from your data, and when you’re using components with vue-loader, it’s possible to write scoped CSS that will affect only the component that CSS is writing in.
It’s common to use
v-bind with the class attribute in order to add or remove classes depending on your data. Vue adds a couple of neat enhancements when using
v-bind to set the class attribute, making it a lot nicer to work with.
If you’ve used the classNames utility in React, you’ll be fairly familiar with the
v-bind syntax. It’s basically the same, except wrapped in an array instead of being arguments of a function.
If you pass an array to
v-bind:class, the classes in the array will be joined together. This is great for times when you want to set classes from your data or computed properties. Take the following example:
In this example,
secondClass evaluates to
bar, so the
div element would be given a class attribute of
In addition to using arrays, you can use objects. An object will conditionally add the keys as classes depending on the values: if the value is truthy, ...