This is a draft cheat sheet. It is a work in progress and is not finished yet.
Loop
<li v-for="task in tasks">{{ task }}</li>
|
Directive with argument
<button v-on:click="onClick"></button>
|
v-on with argument + key modifier
<input v-on:keyup.enter="handleEnter">
|
|
|
Shorthand @ for v-on
<button @click="onClick"></button>
<input @keyup.enter="handleEnter">
|
|
|
Bind class attribute
<li :class="task.completed">{{ task.name }}</li>
Use array:
<li :class="['one', 'two', 'three']">
{{ task.name }}
</li>
Array with conditional class:
<li :class="['one', 'two', someThing ? 'three' : '']">
{{ task.name }}
</li>
Use object:
<li :class="{ 'completed': task.completed }">
{{ task.name }}
</li>
|
|
