<div id="app"> <p>I have a {{ widget }}</p> <p>{{ widget + 's' }}</p> <p>{{ isWorking ? 'YES' : 'NO' }}</p> <p>{{ widget.getSalePrice() }}</p> </div>
Element inserted/removed based on truthiness:
<p v-if="inStock">{{ widget }}</p> <p v-else-if="onOrder">. . .</p> <h1 v-else>. . .</h1>
Uses element’s display CSS property:
<h1 v-show="ok">Hello World!</h1>
Two-way data binding:
<input v-model="firstName" /> v-model.lazy=". . ." Syncs input after change v-model.number=". . ." Always returns a number v-model.trim=". . ." Removes whitespace
To access the position in the array:
<li v-for="(item, index) in items">. . .
To iterate through objects:
<li v-for="(value, key) in object">. . .
Using v-for with a component:
<my-item v-for="item in products" :products="item" :key="item.id">
True or false will add or remove attribute:
<button :disabled="isButtonDisabled">...
If isActive is truthy, the class active will appear:
<div :class="{ active: isActive }">. . .
Style color set to value of activeColor:
<div :style="{ color: activeColor }">
Calls add method on component after click:
Arguments can be passed.
<button @click="add (widget)">. . .
To prevent page reload . . .
<form @submit.prevent="add">. . .
. . . Only trigger once:
<img @mouseover.once="show">. . . .stop Stop all event propagation .self Only trigger if event.target is element itself.
Keyboard entry example:
<input @keyup.enter="submit">