vue.js下简单实现登录

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><style>*

HadwinLing

3646人浏览 · 2018-11-28 21:05:39

HadwinLing · 2018-11-28 21:05:39 发布

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #app{
            width: 300px;
            margin: 100px auto;
        }
        button{

        }
    </style>
</head>
<body>
<div id="app">
    <fieldset>
        <legend>登录系统</legend>
        <div>
            <span>账号：</span>
            <input type="text" placeholder="请输入账号" v-model="newPerson.name">
        </div>
        <div>
            <span>密码：</span>
            <input type="password" placeholder="请输入密码" v-model="newPerson.pwd">
        </div>
        <button @click="register()">登录</button>
    </fieldset>
</div>
<script src="js/vue.js"></script>
<script>
        new Vue({
            el:'#app',
            data:{
                name:123123,
                pwd: 'asdasd',
                newPerson:{name:'',pwd:''},

            },
            methods: { // 实例的所有函数实现
                register(){
                    if(this.newPerson.name === '123123'&&this.newPerson.pwd === 'asdasd'){
                        alert("登录成功");
                        /*
                        * 思想：在登录成功并实现跳转后要记住清空登录信息
                        * */
                        this.newPerson = {name:'',pwd:''};//这里就是清空信息，
                    }else{
                        alert("登录失败");
                    }
                }
            }
        });
</script>
</body>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^