<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#login {
width: 400px;
background-color: white;
border: 1px solid black;
margin-top: 100px;
}
#login form {
padding-top: 25px;
padding-bottom: 25px;
}
.text-center h1 {
color:#b2dba1;
}
</style>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="JQuery/jquery-3.4.1.min.js"></script>
<script src="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script src="js/vue.js"></script>
</head>
<body style="background:url('1.jpg');">
<div id="login" class="center-block">
<div class="text-center">
<h1>登录界面</h1>
</div>
<form style="width: 250px" action="#" class="center-block">
<div class="form-group">
<label rel="username">输入账号:</label><input type="text" class="form-control" v-model="username">
</div>
<div class="form-group">
<label rel="password">登录密码:</label><input type="password" class="form-control" v-model="password">
</div>
<div class="row">
<input style="width: 100px" type="submit" value="登录" class="btn btn-primary col-md-6 col-md-push-4" @click="login">
</div>
</form>
</div>
<script>
var vm = new Vue({
el:'#login',
data:{
user:'123',
pas:'123',
},
methods:{
login(){
if (this.username == this.user && this.password == this.pas) {
alert("来了老弟!!");
} else {
alert('你走错了,老弟!');
}
}
}
})
</script>
</body>
</html>
vue测试题
最新推荐文章于 2023-07-13 11:19:36 发布
本文是一篇关于Vue.js的技能测试题目,涵盖了Vue的基础知识、组件化、响应式原理等内容,旨在帮助开发者检验和提升Vue.js技术水平。
摘要由CSDN通过智能技术生成