Using directives

Vue.js improves the writing of HTML code by offering to write its own components, as we have seen in the preceding section. The framework also makes it easier to write basic HTML code by adding new attributes to the HTML elements or to the components created. These new attributes are called directives.

Note

Directives are used exclusively in HTML elements or created components, that is, in the template section of components.

Their name begins with v-, so as not to be confused with other existing HTML attributes. The main directives are v-if, v-else, v-show, v-for, and v-model. They will be explained now.

The v-if and v-else directives

The v-if directive is used to specify a condition. If true, the HTML element (or component) will be inserted into the HTML page. Otherwise, it will not be present.

Let’s use the v-if directive to indicate that we want to display the value of the counter only for values less than or equal to 20. As soon as the...