Vue CDN

Cards shift

Shift

Lists rendering

• {{ index }}) {{ number }}

• {{ user.name }}: {{ user.age }} y.o.

• {{ index }}) {{ key }} : {{ value }}

Conditional rendering

Showing v-if directive content

Showing v-else directive content

v-show if v-if

v-if v-else-if v-else

Purple White Black Orange

{{ firstName }} / {{ lastName }} / {{ age }}

Move the logic outside the template:

{{ fullName }}

---

Reactivity / Data binding

First Name (with focus out):
Middle Name (with Enter):
Last Name:
Age:
Increment Decrement (with Ctrl)

---

Dynamic binding

Google & Google

Last Name: