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