Built-in Directives | Vue.js

Reactivity: Utilities
Reactivity: Advanced
Dependency Injection
Options: Composition
Syntax Specification
Server-Side Rendering
TypeScript Utility Types
Update the element's text content.
v-text works by setting the element's textContent property, so it will overwrite any existing content inside the element. If you need to update only part of the textContent, you should use mustache interpolations instead (ie. <span>Keep this but update a {{dynamicPortion}}</span>).
See also Template Syntax - Text Interpolation
Update the element's innerHTML.
Contents of v-html are inserted as plain HTML - Vue template syntax will not be processed. If you find yourself trying to compose templates using v-html, try to rethink the solution by using components instead.
Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS attacks. Only use v-html on trusted content and never on user-provided content.
In Single-File Components, scoped styles will not apply to content inside v-html, because that HTML is not processed by Vue's template compiler. If you want to target v-html content with scoped CSS, you can instead use CSS modules or an additional, global <style> element with a manual scoping strategy such as BEM.
See also Template Syntax - Raw HTML
Toggle the element's visibility based on the truthy-ness of the expression value.
v-show works by setting the display CSS property via inline styles, and will try to respect the initial display value when the element is visible. It also triggers transitions when its condition changes.
See also Conditional Rendering - v-show
Conditionally render an element or a template fragment based on the truthy-ness of the expression value.
When a v-if element is toggled, the element and its contained directives / components are destroyed and re-constructed. If the initial condition is falsy, then the inner content won't be rendered at all.
Can be used on <template> to denote a conditional block containing only text or multiple elements.
This directive triggers transitions when its condition changes.
When used together, v-if has a higher priority than v-for. We don't recommend using these two directives together on one element — see the list rendering guide for details.
See also Conditional Rendering - v-if
Denote the "else block" for v-if or a v-if / v-else-if chain.
Does not expect expression
Restriction: previous sibling element must have v-if or v-else-if.
Can be used on <template> to denote a conditional block containing only text or multiple elements.
See also Conditional Rendering - v-else
Denote the "else if block" for v-if. Can be chained.
Restriction: previous sibling element must have v-if or v-else-if.
Can be used on <template> to denote a conditional block containing only text or multiple elements.
See also Conditional Rendering - v-else-if
Render the element or template block multiple times based on the source data.
Expects: Array | Object | number | string | Iterable
The directive's value must use the special syntax alias in expression to provide an alias for the current element being iterated on:
Alternatively, you can also specify an alias for the index (or the key if used on an Object):
The default behavior of v-for will try to patch the elements in-place without moving them. To force it to reorder elements, you should provide an ordering hint with the key special attribute:
v-for can also work on values that implement the Iterable Protocol, including native Map and Set.
Attach an event listener to the element.