There are dedicated directives that allow you to perform conditional checks: v-if
, v-else
and v-else-if
.
<p v-if="shouldShowThis">Hey!</p>
shouldShowThis
is a boolean value contained in the component’s data.
Here’s an example. The v-if
directive checks the noTodos
computed property, which returns false if the state property todos
contains at least one item:
<template>
<main>
<AddFirstTodo v-if="noTodos" />
<div v-else>
<AddTodo />
<Todos :todos=todos />
</div>
</main>
</template>
<script>
export default {
data() {
return {
todos: [],
}
},
computed: {
noTodos() {
return this.todos.length === 0
}
}
}
</script>
This allows solving the needs of many applications without reaching for more complex setups. Conditionals can be nested, too, like this:
<template>
<main>
<Component1 v-if="shouldShowComponent1" />
<div v-else>
<Component2 v-if="shouldShowComponent2" />
<div v-else>
<Component3 />
</div>
</div>
</main>
</template>