Form Input Bindings

主要是要介紹v-model，不過他也只是語法糖。

有一些地雷要注意

1. 會忽略所有表單元素的value、checked、selected1特性的初始值。
   會選擇Vue實例數據來作為具體的值。
   必須在Vuejs的data裡，宣告初始值。(超重要!!!)
2. 對於要求IME (如中文、日語、韓語等) (IME意為'輸入法')的語言，你會發現v-model不會在ime輸入中得到更新。
   如果你也想實現更新，請使用input事件。

Text

HTML

< input v-model="message" placeholder="edit me" >
< p >Message is: { { message } }< /p >

Javascript

data: {
    message: '{{ message }}'
}

Result

Message is: {{ message }}

Multiline text

HTML

< span >Multiline message is:< /span >
< p style="white-space: pre-line" >{ { message } }< /p >
< br >
< textarea v-model="message" placeholder="add multiple lines" >< /textarea >

在< textarea >< /textarea >插值並不會動作，必須加v-model。

Javascript

data: {
    message: '{{ message }}'
}

Result
Multiline message is:

{{ message }}

Checkbox

當作開關: true | false

HTML

< input type="checkbox" id="checkbox" v-model="checked" >
< label for="checkbox" >{ { checked } }< /label >

Javascript

data: {
    checked: {{ checked }}
}

Result
{{ checked }}

當作多選: 成為新陣列

HTML

< div id='example-3' >
  < input type="checkbox" id="jack" value="Jack" v-model="checkedNames" >
  < label for="jack" >Jack< /label >
  < input type="checkbox" id="john" value="John" v-model="checkedNames" >
  < label for="john" >John< /label >
  < input type="checkbox" id="mike" value="Mike" v-model="checkedNames" >
  < label for="mike" >Mike< /label >
  < br >
  < span >Checked names: { { checkedNames } }< /span >
< div >

Javascript

data: {
        checkedNames: {{ checkedNames }}
}

Result Jack John Mike
Checked names: {{ checkedNames }}

Radio

HTML

< input type="radio" id="one" value="One" v-model="picked" >
< label for="one" >One< /label >
< br >
< input type="radio" id="two" value="Two" v-model="picked" >
< label for="two" >Two< /label >
< br >
< span >Picked: { { picked } }< /span >

Javascript

data: {
    picked: '{{ picked }}'
}

Result
One
Two
Picked: {{ picked }}

Select

HTML

< select v-model="selected1" >
  < option disabled value="" >Please select one< /option >
  < option >A< /option >
  < option >B< /option >
  < option >C< /option >
< /select >
< span >Selected: { { selected1 } }< /span >

如果 v-model 的初始值沒有任何匹配的選項， < select>元素就會以「未選擇」的狀態渲染。
在iOS中，這樣使用者將無法選擇第一個選項，因為這樣的情況下，iOS不會引發change事件。
因此，像以上提供 disabled 選項是建議的做法。

Javascript

data: {
    selected1: '{{ selected1 }}'
}

Result
Please select one A B C Selected: {{ selected1 }}

複選選單

HTML

< select v-model="selected2" multiple >
  < option >A< /option >
  < option >B< /option >
  < option >C< /option >
< /select >
< br >
< span >Selected: { { selected2 } }< /span >

Javascript

data: {
    selected2: '{{ selected2 }}'
}

Result
A B C
Selected: {{ selected2 }}

Key-value的選項

HTML

< select v-model="selected1" >
  < option v-for="option in options" v-bind:value="option.value" >
    { { option.text } }
  < /option >
< /select >
< span >Selected: { { selected1 } }< /span >

Javascript

data: {
    selected1: '{{ selected1 }}',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
}

Result
{{ option.text }} Selected: {{ selected1 }}

HTML

< !-- `picked` is a string "a" when checked -- >
< input type="radio" v-model="picked" value="a" >
< !-- `toggle` is either true or false -- >
< input type="checkbox" v-model="toggle" >
< !-- `selected1` is a string "abc" when selected1 -- >
< select v-model="selected1" >
  < option value="abc" >ABC< /option >
< /select >

Result {{picked}} {{toggle}} ABC {{selected1}}

Checkbox

HTML

< input
  type="checkbox"
  v-model="toggle"
  v-bind:true-value="a"
  v-bind:false-value="b" >

// when checked:
vm.toggle === vm.a
// when unchecked:
vm.toggle === vm.b

Javascript

data: {
    toggle: {{toggle}},
    a: {{a}},  //static string
    b: {{b}}   //static string
}

Result

Radio

HTML

< input type="radio" v-model="picked" v-bind:value="c" >

// when checked: vm.picked === vm.c

Javascript

data: {
    picked: '{{picked}}',
    c: '{{c}}',  //static string
    d: '{{d}}'   //static string
}

Result

Select Options

HTML

< select v-model="selected2" >
  < !-- inline object literal -- >
  < option v-bind:value="{ number: 123 }" >123< /option >
< /select >

// when selected2:
typeof vm.selected2 // => 'object'
vm.selected2.number // => 123

Javascript

data: {
    selected2: {{selected2}}
}

Result 111 222 333 123

Modifiers

.lazy

讓修改值的行為，在失去focus時執行，而不是像一般的情況在change時執行。

HTML

< !-- synced after "change" instead of "input" -->
< input v-model.lazy="msg" >

Javascript

data: {
    msg: '{{msg}}'
}

Result
有加lazy
沒加 lazy

.number

轉態成數字的變數型態

HTML

< input v-model.number="age" type="number" >

Javascript

data: {
    age: {{age}} //is a {{typeof(age)}}
}

Result
有加 number
沒加 number

.trim

HTML

< input v-model.trim="msg" >

Javascript

data: {
    msg: '{{msg}}'
}

Result
有加 trim
沒加 trim

v-model with Components

直接看組件的自定義事件