<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>综合示例演示注册</title>
</head>
<body>
<div id="app">
<h2 style="text-align: center">填写个人简介</h2>
<div style="width: 500px;float: left">
<div style="margin-left: 30px;">
<form action="">
姓名:<input type="text" v-model="user" name="user"><br><br>
<fieldset style="margin-right: 30px">
<legend>健康信息</legend>
身高:<input type="text" v-model="height"><br>
体重:<input type="text" v-model="weight">
</fieldset>
<br>
性别:<input type="radio" value="男" v-model="sex">
<label for="">男</label>
<input type="radio" value="女" v-model="sex">
<label for="">女</label>
<br>
喜爱的运动:<br><br>
<input type="checkbox" value="篮球" v-model="checkedNames">
<label for="">篮球</label>
<input type="checkbox" value="足球" v-model="checkedNames">
<label for="">足球</label>
<input type="checkbox" value="排球" v-model="checkedNames">
<label for="">排球</label>
<input type="checkbox" value="游泳" v-model="checkedNames">
<label for="">游泳</label>
<input type="checkbox" value="跑步" v-model="checkedNames">
<label for="">跑步</label>
<br>
<br>
<label for="">地址:</label>
<select name="city" id="city" v-model="address">
<option value="">请选择城市</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="南京">南京</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
<option value="杭州">杭州</option>
<option value="拉萨">拉萨</option>
</select>
<br><br>
个人简介:<br>
<textarea name="profile" id="profile" cols="50" rows="10" v-model="profile"></textarea>
<br><br>
<div style="text-align: center">
<input type="submit" value="提交">
<input type="reset" value="重置">
</div>
</form>
</div>
</div>
<div style="width: 499px;float:right;">
<div style="margin-left: 30px">
姓名:{{user}}<br><br><br>
身高:{{height}}<br>
体重:{{weight}}<br>
性别:{{sex}}<br><br>
喜爱的运动:{{checkedNames}}<br><br>
地址:{{address}}<br><br>
个人简介:{{profile}}<br><br>
</div>
</div>
</div>
<script src="../js/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
user:'虾米大王',
height:178,
weight:80,
sex: '男',
checkedNames: ['跑步','游泳'],
address: '拉萨',
profile:'学习vue',
}
});
</script>
<style>
#app{
margin: 0 auto;
width: 1000px;
height: 610px;
border: 1px solid #0f0f0f;
}
</style>
</body>
</html>
vue-例3-15综合示例演示注册.html
最新推荐文章于 2024-06-19 16:06:57 发布