Vue · Junior · Question 60 of 75

How do you apply `v-if` to several elements without adding a wrapper `<div>`?

<template v-if="loggedIn">
  <h1>Welcome</h1>
  <p>You have new messages</p>
</template>

✓Correct answer: Put v-if on an invisible <template> element
2Repeat v-if on every element only
3Use <fragment v-if>

Explanation

<template> isn't rendered in the final DOM. It also works with v-for and v-else.

Further reading

Vue: Conditional Rendering ↗

Test yourself

Take the Vue · Junior quiz: questions and options are shuffled, and you get a review of your mistakes at the end.