Conditional Rendering

Depending on the conditions of certain variables you may set in the data or logic you include inline, you are doing to render certain elements based on this logic.

Vue gives the user several tools to accomplish this.

v-if

v-if is a directive used to conditionally render an element based on the truthiness of an expression.

For example:

<template>    <div>        <p v-if="showMessage">This is a message</p>    </div></template><script>    export default {        data() {            return {                showMessage: true            }        }    }</script>

In this example, the 'p' element will only be rendered if the 'showMessage' data property is 'true'.

v-else

v-else is used in conjunction with v-if to create an "if-else" style of conditional rendering. For example:

<template>    <div>        <p v-if="showMessage">This is a message</p>        <p v-else>This is not a message/p>    </div></template><script>export default {    data() {        return {            showMessage: false        }    }}</script>

In this example, if showMessageis true, the first pelement will be rendered, otherwise the second pelement with v-else will be rendered.

v-show

v-show is similar to v-if, but it's used to toggle the display property of an element rather than rendering it. For example:

<template>    <div>        <p v-if="showMessage">This is a message</p>        <p v-else>This is not a message/p>    </div></template><script>export default {    data() {        return {            showMessage: true        }    }}</script>

Conclusion

It's important to note that v-if, v-else, and v-show directives have slightly different uses cases and performance implications. v-if has the most overhead and it will fully render the component only when the condition is met. v-show is less expensive but it will always render the component and just toggle the display property.