Guide: Conditional Rendering

Question 1

What element can we use to encapsulate multiple elements in a v-if directive?

Answer 1

template element, which is an invisible wrapper that won’t be rendered in the final result

Question 2

What is one thing you must make sure of with a v-else-if and v-else directive?

Answer 2

They must immediately follow their appropriate directives, otherwise they won’t be recognized.

Question 3

When toggling between elements in a if/else section, common elements being resued becomes a possibility. How do you combat this?

Answer 3

Use key="some-unique-value" on both of the elements so that they won’t be reused and will properly be re-created.

Question 4

What’s important ways that v-show differs from v-if?

Answer 4

1. v-show simply toggles the CSS display property, the element is always rendered regardless of the condition
2. v-show can not be used on an actual template element, only on actual elements
3. v-if is “real” conditional rendering: ensures that event listeners and child components inside the conditional block are properly destroyed and re-created during toggles
4. If v-if is false on initial render, it will not do anything. Will only render once the condition becomes true for the first time - known as being lazy

Question 5

What’s a good rule of thumb for when to use v-show and v-if?

Answer 5

• Use v-show if you need to toggle something very often
• Use v-if if the condition is unlikely to change at runtime

Question 6

Which has a higher precedence: v-if or v-for?

Answer 6

v-for has a higher priority than v-if.