liveBook · Manning

V-if directive

As explained in Build a Frontend Web Framework (From Scratch)

A Vue directive that conditionally includes or displays an element based on application state.

The Vue v-if directive conditionally shows an element according to application state. It lets an HTML template express behavior without manually managing the element’s visibility. section 1.3.1

Conditional paragraph

When hasDiscount is true, Vue displays the paragraph; otherwise, the conditional element is not shown. section 1.3.1

<p v-if="hasDiscount">
  You get a discount!
</p>

A Vue template places v-if directly on the element whose display depends on application state. section 1.3.1

How Build a Frontend Web Framework (From Scratch) covers it

How deep it goes
Defines the directive and demonstrates its syntax, but stops short of explaining directive internals.
Examples
Uses a discount paragraph controlled by a hasDiscount condition.
What you can do after
Apply it via Vue to show an element conditionally from application state.
How it connects
Connects conditional DOM-element behavior with HTML templates, application state, and comparable React and Svelte syntax.
Cover of Build a Frontend Web Framework (From Scratch)
liveBookmanning.com
Read Build a Frontend Web Framework (From Scratch) on liveBook Get the book at manning.com

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Build a Frontend Web Framework (From Scratch). The section links point to the parts of the book it draws on.