Vue：入门8（表单输入绑定 ）

基础用法

<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">Jacklabel>
   <input type="checkbox" id="john" value="John" v-model="checkedNames">
   <label for="john">Johnlabel>
   <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
   <label for="mike">Mikelabel>
   <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 >Onelabel>
   <br>
   <input type="radio" value="Two" v-model="picked">
   <label >Twolabel>
   <br>
   <span>Picked: {{ picked }}span>
div>
<script>
   new Vue({
      el: '#id3',
      data: {
         picked: ''
      }
   })
script>

单选选择框

<div id="id4">
   <select v-model="selected">
      <option disabled value="">请选择option>
      <option>Aoption>
      <option>Boption>
      <option>Coption>
   select>
   <span>Selected: {{ selected }}span>
div>
<script>
   new Vue({
      el: '#id4',
      data: {
         selected: 'A'
      }
   })
script>

<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>aspan>
   <input type="radio" v-model="pick" v-bind:value="b"><span>bspan>
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>