序
简单讲解v-model双向数据绑定的使用,过于简单就不写描述啦，看代码，工具是HBuilder X
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div >
性别：
<input type="radio" v-model="sex" value="男"/>男
<input type="radio" v-model="sex" value="女"/>女
<br>
{{sex}}
</div>
<div >
爱好：
<input type="checkbox" value="上网" v-model="likes"/>上网
<input type="checkbox" value="游泳" v-model="likes" checked="checked"/>游泳
<input type="checkbox" value="跑步" v-model="likes" />跑步
<input type="checkbox" value="泡妞" v-model="likes" />泡妞
<ul v-for="like in likes"><li>{{like}}</li></ul>
</div>
<div >
你最喜欢的城市：
<select v-model="city" >
<option v-for="cities in citylist" :value="cities.value">{{cities.text}}</option>
</select>
<br>
{{city}}
</div>
<div >
添加文字按回车就会到items数组中<input v-model="item" v-on:keyup.enter="addI" />
<ul v-for="i in items">
<li>{{i.text}}</li>
</ul>
</div>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
item:'',
items:[{text:"苹果"}],
sex:'男',
likes:['泡妞'],
city:'fz',
citylist:[
{
text:'北京',
value:'bj'
},
{
text:'福州',
value:'fz'
},
{
text:'上海',
value:'sh'
}]
},
methods:{
addI:function(){
var txt=this.item.trim();
if(txt){
this.items.push({text:txt})
}
}
},
})
</script>
</html>