Vue：入門8（表單輸入綁定 ）

基礎用法

<!--
v-model 指令在表單 <input>、<textarea> 及 <select> 元素上創建雙向數據綁定
v-model 會忽略所有表單元素的 value、checked、selected 特性的初始值而總是將 Vue 實例的數據作爲數據來源。
你應該通過 JavaScript 在組件的 data 選項中聲明初始值。
在文本區域插值 (<textarea>{{text}}</textarea>) 並不會生效，應用 v-model 來代替
-->
<div id="id1">
   <input v-model="msg" placeholder="edit me">
   <p>msg: {{msg}}</p>
</div>
<script>
   var vm1 = new Vue({
      el:'#id1',
      data:{
         msg:''
      }
   });
</script>

複選框

<div id='id2'>
   <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>
<script>
   var vm2 = new Vue({
      el:'#id2',
      data:{
         checkedNames:[],
      }
   });
</script>

單選按鈕

<div id="id3">
   <input type="radio"   value="One" v-model="picked">
   <label >One</label>
   <br>
   <input type="radio" value="Two" v-model="picked">
   <label >Two</label>
   <br>
   <span>Picked: {{ picked }}</span>
</div>
<script>
   new Vue({
      el: '#id3',
      data: {
         picked: ''
      }
   })
</script>

單選選擇框

<!--爲選中狀態：selected: ''  選中其中一個：selected: 'A' -->
<div id="id4">
   <select v-model="selected">
      <option disabled value="">請選擇</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
   </select>
   <span>Selected: {{ selected }}</span>
</div>
<script>
   new Vue({
      el: '#id4',
      data: {
         selected: 'A'
      }
   })
</script>

<!-- true-value，false-value 分別是被選中和沒有被選中時的值-->
<div id="id5">
   <input type="checkbox"
          v-model="toggle"
          true-value="yes1"
          false-value="no1"><span>{{toggle}}</span>
   <hr>
   <input type="radio" v-model="pick" v-bind:value="a"><span>a</span>
   <input type="radio" v-model="pick" v-bind:value="b"><span>b</span>
</div>
<script>
   new Vue({
      el: '#id5',
      data: {
         toggle:'no',
         pick:'',
         a:'a',
         b:'b'
      }
   })
</script>

修飾符

**.number,只能輸入數值類型   .trim過濾首尾空白字符 **
<input id="id6" v-model.number="age" type="number">
<input id="id7" v-model.trim="msg">

<script>
   new Vue({
      el: '#id6',
      data: {
         age:0
      }
   });
   new Vue({
      el: '#id7',
      data: {
         msg:''
      }
   })
</script>