Vue Learn

Syntax And Computed

Message: {{ message }}

Once Message: {{ once_message }}

Reverse Message: {{ reverseMessage }}

Watch

Ask a yes/no question:

Class And Style

Object Class Bind 1

Object Class Bind 2

Style Bind 1

Style Bind 2

Conditonal

v-if 作用单个标签

Yes

v-if 作用多个标签

独立 <input>

v-show

Hello!

Bye!

List

v-for

{{ item.data }}

{{ parentMessage }} - {{ index }} - {{ item.data }}

{{ value }}
{{ key }}: {{ value }}
{{ index }}. {{ key }}: {{ value }}

Events

Forms

多行文本

Multiline message is:

复选框

多个勾选框，绑定到同一个数组

Jack John Mike
Checked names: {{ checkedNames }}

单选按钮

One
Two
Picked: {{ picked }}

单选列表

Selected: {{ selected }}

多选列表

Selected: {{ multiSelected }}

动态选项 v-for

Selected: {{ dynSelected }}