<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<form action="">
<div>
<span>姓名:</span>
<span>
<input type="text" v-model='uname'>
</span>
</div>
<div>
<span>性别:</span>
<span><input type="radio" id="male" value="1" v-model='gender'>
<label for="female">男</label>
<input type="radio" id="female" value="2" v-model='gender'>
<label for="female">女</label>
</span>
</div>
<div>
<span>爱好:</span>
<input type="checkbox" id="ball" v-model='hobby' value="1">
<label for="ball">篮球</label>
<input type="checkbox" id="sing" v-model='hobby' value="2">
<label for="sing">唱歌</label>
<input type="checkbox" id="code" v-model='hobby' value="3">
<label for="code">写代码</label>
</div>
<div>
<span>职业:</span>
<select v-model='occupation'>
<option value="1" multiple="true">
请选择职业...
</option>
<option value="2">教师</option>
<option value="3">软件工程师</option>
<option value="4">律师</option>
</select>
</div>
<div>
<span>个人简历:</span>
<textarea v-model='desc'></textarea>
</div>
<div>
<input type="submit" value="提交" @click.prevent='handle'>
</div>
</form>
</div>
<script type="text/javascript" src="./js/vue.js"></script>
<script>
var vm = new Vue({
//绑定的标签
el: '#app ',
//自定义按键修饰符
data: {
uname: 'list',
gender: 2,
hobby: ['2', '3'],
desc: 'nihao',
occupation: 2
},
methods: {
handle: function() {
/* console.log(); */
console.log(this.uname);
console.log(this.gender);
console.log(this.hobby);
}
}
});
</script>
</body>
</html>
运行结果
