Binding CSS styles in Vue

In this section, we'll discuss how to animate other parts of the page when a component is mounted or removed. For that, we will use the v-bind directive, and as we have seen in the previous chapters, we can use this directive to bind to HTML attributes. Once bound, these attributes can then be manipulated from our Vue instance.

The example for which we will demonstrate CSS style binding is a simple onboarding demo. Onboarding, in terms of web page usability, is the practice of showing new users of a web app the overall functionality that a web page has, which is achieved by highlighting a certain section of a page and showing a popover with some information that further describes the functionality at that specific step of the onboarding process.

To begin with, we need to understand that we can statically bind CSS classes by passing the value of the v-bind:class directive as an object, as in the following example:

<p v-bind:class="{}">Some text...</p>

Inside...