
If using inline statement, the statement has access to the special $event property: v-on:click="handle('ok', $event)". When listening to native DOM events, the method receives the native event as the only argument. When used on a custom element component, it listens to custom events emitted on that child component. When used on a normal element, it listens to native DOM events only. The expression can be a method name, an inline statement, or omitted if there are modifiers present. The event type is denoted by the argument. self - only trigger handler if event was dispatched from this element.

capture - add event listener in capture mode. Shorthand: Function | Inline Statement | Object (without argument)Īrgument: event (optional if using Object syntax) V-for can also work on values that implement the Iterable Protocol, including native Map and Set. Restriction: previous sibling element must have v-if or v-else-if. We don't recommend using these two directives together on one element - see the list rendering guide for details.ĭenote the "else block" for v-if or a v-if / v-else-if chain. When used together, v-if has a higher priority than v-for. This directive triggers transitions when its condition changes. If the initial condition is falsy, then the inner content won't be rendered at all.Ĭan be used on to denote a conditional block containing only text or multiple elements.

When a v-if element is toggled, the element and its contained directives / components are destroyed and re-constructed. It also triggers transitions when its condition changes.Ĭonditionally render an element or a template fragment 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. Toggle the element's visibility based on the truthy-ness of the expression value.
