表单与 v-model

v-model: 用于表单元素上的双向数据绑定

基本用法

<div id="app">
         <input type="text" v-model="message" placeholder="输入...">
         <p>输入的内容是: {{ message }}</p>
	</div>
<script>
var app = new Vue({
	el:"#app",
	data:{
	  message:''
	}
})
</script>

单选按钮

	
       <div id="app">

          <input type="radio" :checked="picked">
          <label for="">单选按钮</label>

	</div>
<script>
var app = new Vue({
	el:"#app",
	data:{
	  picked:true
	}
})
</script>

互斥单选按钮(v-model配合value,当sex的值等于value时,此项被选中)

	
       <div id="app">

          <input type="radio" v-model="sex" value="男" id="1">
          <label for="1">男</label>
          <input type="radio" v-model="sex" value="女" id="2">
           <label for="2">女</label>

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

复选框

	<!--单个复选框-->
	<!--当复选框选中时, checked等于true, 未选中时, checked等于false; 反之一样-->
       <div id="app">
          <input type="checkbox" v-model="checked"  id="agree">
          <label for="agree">同意</label>	
      </div>
<script>
var app = new Vue({
	el:"#app",
	data:{
	  checked:false
	}
})
</script>

<!--多个复选框-->
<!--v-model 配合 value使用-->
	<!--单个复选框-->
     <div id="app">
       <template v-for="(item,index) in loves" >
       	  <input type="checkbox" v-model="love" :value="item" :id="index">
       	  <label :for="index">{{ item }}</label>   
       </template>
      <p>你的love是: {{ love.join()}}</p>
	</div>

<script>
var app = new Vue({
	el:"#app",
	data:{
	   love:[],
	   loves:["run","swim","football"]
	}
})
</script>

选择列表

	<!--单选-->
	<!--option是被选项，如果含有value属性. v-model就会优先匹配value的值;
	如果没有,就会直接匹配option的text.-->
     <div id="app">
       <select v-model="opt"><!--opt的值是选中项的value的值-->
       	  <option value="html">HTML</option>
       	  <option value="css">CSS</option>
       	  <option value="js">JavaScript</option>
       </select>
      <p>你的选择是: {{ opt }}</p>
	</div>
<script>
var app = new Vue({
	el:"#app",
	data:{
         opt:"js"     //默认选择value等于js的项
     }
})
</script>
<!--多选下拉选择列表-->
<script>
  var app= new Vue({
       el:"#app",
        data:{
        opt:[ ]
      }
})
</script>

修饰符
.lazy:
.number:
.trim:

<input v-model.lazy="uname">
<input v-model.number="uname">
<input v-model.trim="uname">