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>