v-display
Updated on Sep 5, 2025 1 minutes to readThe v-display directive adds display-related CSS classes to an element based on the directive’s value and optional modifiers.
- Value → one of the display modes:
none,inline,inline-block,block,table,table-cell,table-row,flex,inline-flex. - Modifiers → one or more size keys:
sm,md,lg,xl.
If no modifiers are given, the directive adds a single class:
d-{value}If modifiers are present, it generates conditional classes:
d-{size}-{value}Special handling:
- If the element already has the tab-pane class, the directive does nothing.
- Invalid values or sizes are ignored.
• Example
<!-- Basic usage: element is "block" -->
<div v-display="'block'">Block element</div>
<!-- Applied class: d-block -->
<!-- Multiple sizes: element is "block" on small and medium -->
<div v-display.sm.md="'block'">Responsive block</div>
<!-- Applied classes: d-sm-block d-md-block -->
<!-- Flex only on large -->
<div v-display.lg="'flex'">Flex on lg</div>
<!-- Applied class: d-lg-flex -->
<!-- Hidden everywhere -->
<div v-display="'none'">Hidden element</div>
<!-- Applied class: d-none -->