Vue表单输入绑定(v-model)

1.文本框

<div id="app">
    <input v-model="message" type="text" placeholder="ZMR"/>
    <p>{{message}}</p>
</div>

<script>
  var vm = new Vue({
    el:"#app",
    data:{
      message:"ZMR"
    }
  })
</script>

2.文本域

<div id="app">
   <textarea v-model="ZMR" cols="60" rows="4"></textarea><br>
   <span>文本域</span>{{ZMR}}
</div>

<script>
    var vm = new Vue({
       el:"#app",
       data:{
          ZMR:""
       }
    })
</script>

3.复选框

<div id="app">
    <input type="checkbox" value="playgame" v-model="checkedNames"/>
    <label>playgame</label>
    <input type="checkbox" value="playgames" v-model="checkedNames"/>
    <label>playgames</label>
    <input type="checkbox" value="playgameplan" v-model="checkedNames"/>
    <label>playgameplan</label>
    <br>
    <span>{{checkedNames}}</span>
</div>

<script>
   var vm = new Vue({
       el:"#app",
       data:{
          checkedNames:[]
       }
   })
</script>

4.单选按钮

<div id="app">
   <input type="radio" value="man" v-model="sex"/>
   <lable>man</lable><br>
   <input type="radio" value="woman" v-model="sex"/>
   <lable>woman</lable>
   <span>{{sex}}</span>
</div>

<script>
  var vm  = new Vue ({
     el:"#app",
     data:{
       sex:""
     }
  })
</script>

5.选择列表

<div id="app">
   <select v-model="love">
      <option value="">game</option>
      <option>swim</option>
      <option>piano</option>
      <option>chemistry</option>
   </sclect>
   <span>{{love}}</span>
</div>

<script>
  var vm  = new Vue ({
     el:"#app",
     data:{
       love:""
     }
  })
</script>