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",		// 性別	
	}
});