<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body >
<div id="myApp">
<input type="text" v-model.trim="str" />{{str}}
<br />
<!--单选框-->
<input type="radio" value="男" v-model="gender" />男
<input type="radio" value="女" v-model="gender"/>女
<input type="radio" value="保密" v-model="gender" />保密
<br />
<!--多选框-->
<dl>
<dt>爱好:</dt>
<dd>
<!--:绑定属性-->
<label v-for="item in love"> <input type="checkbox" :value="item" v-model="loveArr"/>{{item}}</label>
<!--<label > <input type="checkbox" value="睡觉" v-model="loveArr"/>睡觉</label>
<label > <input type="checkbox" value="打豆豆" v-model="loveArr"/>打豆豆</label>-->
</dd>
</dl>
{{loveArr}}
<br />
<!--下拉选择-->
<select v-model="selectCont">
<option v-for="item in love" :value="item">{{item}}</option>
</select>
{{selectCont}}
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#myApp",
data:{
str:"",
gender:"男",
loveArr:[],
love:["吃饭","睡觉","打豆豆","吹空调"],
//给select设置默认值
selectCont:"吃饭"
}
})
</script>
</html>