1.text

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

Paste_Image.png

2.checkbox

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

Paste_Image.png

多個(gè) checkboxes, 綁定到相同的數(shù)組上

<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>
new Vue({
  el: '...',
  data: {
    checkedNames: []
  }
})

Paste_Image.png

3.radio

<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>

Paste_Image.png

4.select

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

Paste_Image.png

5.Multiple select (bound to Array):

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

Paste_Image.png

6.v-for 配合select

<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>
<span>Selected: {{ selected }}</span>
new Vue({
  el: '...',
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})

Paste_Image.png

選中對(duì)應(yīng)的值

<!-- `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">

<!-- `selected` is a string "abc" when selected -->
<select v-model="selected">
<option value="abc">ABC</option>
</select>

7.checkbox

<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

8.radio

<input type="radio" v-model="pick" v-bind:value="a">

// when checked:
vm.pick === vm.a

9.selelct options

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

// when selected:
typeof vm.selected // -> 'object'
vm.selected.number /

Modifier

(1).lazy 修改默認(rèn)為change事件調(diào)用而非input事件

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

（2）.number轉(zhuǎn)化為數(shù)字

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

（3）.trim

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