Vue学习（表单输入）

基础用法
v-model指令在表单<input>、<textarea>、<select> 元素上创建双向数据绑定。它会根据控件类型自当选取正确大的方法更新元素。
v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源。
文本

姓名：<input type="text" v-model="username"/>{{username}}
------------------------------------------
var vm = new Vue({
	el:"#app",
	data:{
		username:"",
		}
)};

多行文本

<textarea v-model="desc"></textarea><br />{{desc}}
--------------------------------------------
var vm = new Vue({
	el:"#app",
	data:{
		desc:"",
		}
)};

下拉框

性别：
<select v-model="sex">
	<option value="" >请选择</option>
	<option value="mail">男</option>
	<option value="femail">女</option>
</select>
-------------------------------------------
var vm = new Vue({
	el:"#app",
	data:{
		sex:"", // 默认选中
		}
)};

选择城市匹配所属的县区案例

城市：<select v-model="cityId" @change="query()">
	<option v-for="city in citys" :value="city.id" >{{city.name}}</option>
</select>

<br />
区：<select>
	<option v-for="area in areas">{{area.name}}</option>
</select>
----------------------------------------
var vm = new Vue({
	el:"#app",
	data:{
		cityId:"101",			// 选中的城市Id
		citys:[
			{id:"101",name:"济南"},
			{id:"102",name:"青岛"},
			{id:"103",name:"济宁"},
		],
		areas:[],	// 县区
		
	}，
	methods:{
		query:function(){
			if(this.cityId=="101"){
				 this.areas = [
					{areaId:"1011",name:"历下区"},
					{areaId:"1012",name:"市中区"},
					{areaId:"1013",name:"郊区"}
				]
			}else if(this.cityId=="102"){
				this.areas = [
					{areaId:"1021",name:"1区"},
					{areaId:"1022",name:"2区"},
					{areaId:"1023",name:"3区"}
				]
			}else{
				this.areas = [
					{areaId:"1031",name:"曲阜区"},
					{areaId:"1032",name:"任城区"},
					{areaId:"1033",name:"嘉祥"}
				]
			}
		}
	}
)};

复选框

爱好：<br />
	<input type="checkbox" value="football" v-model="hobbys" />足球<br />
	<input type="checkbox" value="basketball" v-model="hobbys" />篮球<br />
	<input type="checkbox" value="sing" v-model="hobbys" />唱歌<br />
	<input type="checkbox" value="run" v-model="hobbys" />跑步<br />
	--------------------------------
	var vm = new Vue({
		el:"#app",
		data:{
			hobbys:["run"],		// 爱好，默认选中
		}
	});

单选框

性别：
<input type="radio" value="nan" v-model="selected"/>男
<input type="radio" value="nv" v-model="selected"/>女
---------------------------------
var vm = new Vue({
	el:"#app",
	data:{
		selected:"nan",		// 性别	
	}
});