<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 1.导入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 2.定义一个 标签 需要给一个标签添加 id -->
<div id="app">
<span>{{message}}</span>
<hr>
<table>
<tr> <td>用户名</td> <td><input type="text" name="username" v-model="username"></td></tr>
<tr> <td>密码</td> <td><input type="password" name="password1" v-model="password1"></td></tr>
<tr> <td>确认密码</td> <td><input type="password" name="password2" v-model="password2"></td></tr>
<tr> <td>性别</td>
<td>
男 <input type="radio" name="sex" value="boy" v-model="sex">
女 <input type="radio" name="sex" value="girl" v-model="sex">
</td>
</tr>
<tr>
<td>爱好</td>
<td>
足球 <input type="checkbox" name="like" value="足球" v-model="like">
篮球 <input type="checkbox" name="like" value="篮球" v-model="like">
兵乓球<input type="checkbox" name="like" value="兵乓球" v-model="like">
</td>
</tr>
</table>
<button v-on:click="register">注册</button>
</div>
</body>
<!-- 3.创建vue实例 -->
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
message:'hello',
username:'',
password1:'',
password2:'',
sex:'',
like:[],
},
methods:{
register:function(){
alert(this.username+this.password1+this.password2+this.sex+this.like)
}
}
})
</script>
</html>