Conditional Rendering In Vue

Conditional Rendering in Vue

Docs and Source

Source Here

Explanation and Notes

You can use the v-if="" attribute for HTML elements for conditionally rendering elements. So whatever variable you have set in there will cause the element to render if that variable evaluates as truthy.

This resource lists the v-if and a few other ways to render conditionally.

Code Example

This element will only render if "awesome" evaluates as True. In this case "awesome" is just a string so it will evaluate as True.

<h1 v-if="awesome">Vue is awesome!</h1>

#JavaScript
#Vue