<!DOCTYPE html>
<html>
<head>
<title>
</title>
<style type="text/css">
div{
margin: 30px;
}
.mulitStyle{
height:auto;
}
</style>
</head>
<body>
<div id="app">
<form action="https://www.baidu.com">
<div>
<label>姓名</label><input type="text" name="" v-model="uname">
</div>
<div>
<label>性别</label>
<input type="radio" value="1" v-model="gender"><label>男</label>
<input type="radio" value="2" v-model="gender"><label>女</label>
</div>
<div>
<label>兴趣爱好</label>
<input type="checkbox" name="" value="游泳" v-model="aihao">游泳
<input type="checkbox" name="" value="打球" v-model="aihao">打球
<input type="checkbox" name="" value="音乐" v-model="aihao">音乐
<input type="checkbox" name="" value="电影" v-model="aihao">电影
</div>
<div class="mulitStyle">
<label>课程</label>
<select v-model="kecheng" class="mulitStyle" multiple>
<option value="1">语文</option>
<option value="2">数学</option>
<option value="3">英语</option>
<option value="4">体育</option>
</select>
</div>
<div>
<label>简介</label>
<textarea>
</textarea>
</div>
<div><input type="submit" name="" @click.prevent="handle"></div>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript"></script>
<script type="text/javascript">
//在原生js中使用
var obj={
};
new Vue({
el: '#app',
data: {
uname:'张三',
gender:2,
aihao:["游泳","打球"],
kecheng:[]
},
methods:{
handle:function(){
console.log(this.uname);
console.log(this.gender);
console.log(this.aihao);
console.log(this.kecheng);
}
}
})
</script>
</body>
</html>
View Code