vue233/08-综合练习/简单注册页面/index.html

70 lines
3.1 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../../00-tools/Fontawesome/css/font-awesome.min.css">
<link rel="stylesheet" href="./css/css.css">
</head>
<body>
<div id="app">
<div class="shower">
<div>用户名:{{user}}</div>
<div>密码:{{pwd}}</div>
<div>确认密码:{{pwds}}</div>
<div>性别:{{sex}}</div>
<div>爱好:{{fav.join(",")}}</div>
<div>地址:{{top_city}}-{{city}}-{{low_city}}</div>
</div>
<div class="frm">
<form action="">
<label for=""><h1>注册</h1></label>
<div class="user">
<i class="fa fa-user-o"></i>
<input type="text" name="user" id="" v-model.lazy="user">
</div>
<div class="pwd">
<i class="fa fa-lock"></i>
<input type="password" name="pwd" id="" v-model.lazy="pwd">
</div>
<div class="pwds">
<i class="fa fa-lock"></i>
<input type="password" name="pwds" id="" v-model.lazy="pwds">
</div>
<div>
<i class="fa fa-venus-mars"></i>
<input type="radio" name="sex" v-model="sex" value="男">
<input type="radio" name="sex" v-model="sex" value="女">
</div>
<div>
<i class="fa fa-snowflake-o"></i>
<input type="checkbox" name="fav" value="购物" v-model="fav">购物
<input type="checkbox" name="fav" value="电影" v-model="fav">电影
<input type="checkbox" name="fav" value="动漫" v-model="fav">动漫
<input type="checkbox" name="fav" value="看书" v-model="fav">看书
</div>
<div>
<i class="fa fa-address-card-o"></i>
<select name="" id="" v-model.lazy="top_city">
<option value="default">请选择省份</option>
<option value="福建省">福建省</option>
</select>
<select name="" id="" v-model.lazy="city">
<option value="default">请选择市级</option>
<option value="泉州市">泉州市</option>
</select>
<select name="" id="" v-model.lazy="low_city">
<option value="default">请选择镇</option>
<option value="内坑镇">内坑镇</option>
</select>
</div>
<button @click.prevent="zhuce()">注册</button>
</form>
</div>
</div>
</body>
<script src="../../JavaScript/vue.js"></script>
<script src="./js/index.js"></script>
</html>