conditional rendering

16 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

v-show directive behavior

v-show toggles element visibility based on the truthy-ness of the expression value. It works by setting the display CSS property via inline styles and tries to respect the initial display value when the element is visible. v-show triggers transitions when its condition changes. It expects any value type.

v-if directive and element lifecycle

v-if conditionally renders an element or template fragment based on the truthy-ness of the expression value. When a v-if element is toggled, the element and its contained directives and components are destroyed and re-constructed. If the initial condition is falsy, the inner content will not be rendered at all. v-if can be used on <template> tags to denote a conditional block containing only text or multiple elements. v-if triggers transitions when its condition changes. When used together with v-for on one element, v-if has higher priority than v-for and this combination is not recommended.

v-else-if directive requirements and usage

v-else-if denotes the 'else if block' for v-if and can be chained. It expects any value type. The restriction is that the previous sibling element must have v-if or v-else-if. v-else-if can be used on <template> tags to denote a conditional block containing only text or multiple elements.

Three directives for conditional rendering

Vue has three directives for conditional rendering: v-if conditionally renders an element and destroys/reconstructs it when toggled; v-else denotes the 'else block' following v-if; v-else-if denotes an 'else if block' that can be chained. Use v-if when you need to conditionally render and destroy elements. Use v-else to provide an alternative. Use v-else-if for multiple conditional branches.

v-if directive for conditional rendering

The v-if directive is used to conditionally render a block. The block will only be rendered if the directive's expression returns a truthy value. Example: <h1 v-if="awesome">Vue is awesome!</h1>

v-else directive usage

The v-else directive indicates an 'else block' for v-if. A v-else element must immediately follow a v-if or a v-else-if element, otherwise it will not be recognized.

v-else example with toggle

Example showing v-else with v-if: <h1 v-if="awesome">Vue is awesome!</h1> <h1 v-else>Oh no 😢</h1>

v-else-if directive for chained conditions

The v-else-if directive serves as an 'else if block' for v-if. It can be chained multiple times. Similar to v-else, a v-else-if element must immediately follow a v-if or a v-else-if element.

v-else-if example with multiple conditions

Example of chained v-else-if: <div v-if="type === 'A'">A</div> <div v-else-if="type === 'B'">B</div> <div v-else-if="type === 'C'">C</div> <div v-else>Not A/B/C</div>

v-if on template element for multiple elements

Because v-if must be attached to a single element, use v-if on a <template> element to toggle multiple elements. The <template> element serves as an invisible wrapper and will not be included in the final rendered result. v-else and v-else-if can also be used on <template>.

v-if on template example

Example of v-if on template: <template v-if="ok"><h1>Title</h1><p>Paragraph 1</p><p>Paragraph 2</p></template>

v-show directive for CSS-based toggling

The v-show directive conditionally displays an element. An element with v-show will always be rendered and remain in the DOM; v-show only toggles the display CSS property of the element. v-show does not support the <template> element and does not work with v-else.

v-if vs v-show differences

v-if is 'real' conditional rendering that ensures event listeners and child components inside the conditional block are properly destroyed and re-created during toggles. v-if is lazy: if the condition is false on initial render, the conditional block won't be rendered until the condition becomes true. v-show always renders the element regardless of initial condition, with CSS-based toggling. v-if has higher toggle costs while v-show has higher initial render costs.

When to use v-show vs v-if

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

v-if and v-for precedence and recommendation

When v-if and v-for are both used on the same element, v-if will be evaluated first. It is not recommended to use v-if and v-for on the same element due to implicit precedence.

Three directives for conditional rendering

The three directives for conditional rendering are: (1) v-if - renders a block only if the expression returns a truthy value, with proper destruction and recreation of child components and event listeners during toggles, and is lazy on initial render; (2) v-else - indicates an else block that must immediately follow v-if or v-else-if; (3) v-show - always renders the element but toggles the display CSS property. Use v-if when the condition is unlikely to change, use v-show when you need to toggle very often, and use v-else-if for chained conditions.

Give your agent this brain