Vue测试题

最新推荐文章于 2023-07-13 11:19:36 发布

上善若水丿

最新推荐文章于 2023-07-13 11:19:36 发布

阅读量1k

点赞数

分类专栏： web前端文章标签： Web

本文链接：https://blog.csdn.net/PanHanJia/article/details/101021689

版权

web前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

在这里插入图片描述
要求：使用vue，完成一个登陆校验功能。

<!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>

上善若水丿

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Vue测试题

要求：使用vue，完成一个登陆校验功能。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #login { width: 400p...
复制链接

扫一扫