跳转到帖子

  • 游客您好，欢迎来到黑客世界论坛！您可以在这里进行注册。

    赤队小组-代号1949（原CHT攻防小组）在这个瞬息万变的网络时代，我们保持初心，创造最好的社区来共同交流网络技术。您可以在论坛获取黑客攻防技巧与知识，您也可以加入我们的Telegram交流群 共同实时探讨交流。论坛禁止各种广告，请注册用户查看我们的使用与隐私策略，谢谢您的配合。小组成员可以获取论坛隐藏内容！

    TheHackerWorld官方

  • 0

vue实现登录、注册、退出、跳转等功能

 分享
HACK1949

询问由 HACK1949,

问题

HACK1949 Grand Master

HACK1949

发布于
发布于

vue实现登录、注册、退出、跳转等功能

5fe6791f5ef39.png

本文给大家介绍vue实现登录、注册、退出、跳转功能，具体代码如下所示:

效果图1：

2020122311031067.png

效果图2：

2020122311031068.png

效果图3：

2020122311031069.png

效果图4：

2020122311031070.png

完整实例：

<!DOCTYPE html>

<html>

  <head>

    <meta charset="GBK">

    <title></title>

    <style>

    ul li {

  

      margin: 0;

      padding: 0;

      list-style: none;

    }

    #app {

      width: 600px;

      height: 400px;

      margin: 0 auto;

      border: 1px solid #ccc;

    }

    .title{

        text-align:center;

    }

    .tab-tilte{

      width: 99%;

    }

    .tab-tilte li{

      float: left;

      width: 31%;

      padding: 10px 0;

      text-align: center;

      background-color:#f4f4f4;

      cursor: pointer;

    }

   /* 点击对应的标题添加对应的背景颜色 */

    .tab-tilte .active{

      background-color: #09f;

      color: #fff;

    }

    .tab-content div{

      float: left;

      width: 25%;

      line-height: 100px;

      text-align: center;

    }

    .sider_icon{

                display: inline-block;

                width:36px;

                height:40px;

                line-height:36px;

                font-size:20px;

                text-align:center;

                color:#fff;

                background: url(../images/bubble.png) 0 0 no-repeat;

                top:-20px;

            }

        .contentli{

            float: left;

          padding: 10px 0;

          text-align: center;

        }

        .input{

            float: left;

            width: 60%;

            margin-left:20%;

          padding: 10px 0;

          align:center;

        }

        .btn{

            float: left;

          width: 20%;

          margin-left:60%;

          padding: 10px 1px;

          text-align: center;

        }

        .guanggao{

            float:right;

            padding-right:10px;

            cursor:pointer;

        }

        #bottomDiv{

            float: left;

          margin-left:40%;

          padding: 10px 10px;

          text-align: center;

        }

        #bottomDiv a{

                 padding: 1px 10px;

                 cursor:pointer;

                 border-bottom:1px solid red;

        }

    </style>

  </head>

  <body>

    <div id="app" >

        <div v-show='page==="advert"'>

            <span class='guanggao' @click='goLogin'>点击跳转<b>{{n}}</b></span>

             

            <div id='bottomDiv'>

                <h1 class='title'>欢迎体验</h1>

            </div>

        </div>

        <div v-show='page==="login"'>

            <div>

                <h1 class='title'>欢迎登录</h1>

                <div>

                    <input type="text" v-model='name' class="input" placeholder='请输入用户名'>

                    <p v-show='!name'>请输入用户名</p>

                </div>

                <div>

                <input type="text" v-model='pwd' class="input" placeholder='请输入密码'>

                <p v-show='!pwd'>请输入密码</p>

                </div>

                <button @click="add" :disabled="!name||!pwd" class='btn'>登录</button>

            </div>

            <div id='bottomDiv'>

                <a @click="goRegister">我要注册</a>

            </div>

        </div>

        <div v-show='page==="register"'>

            <div>

                <h1 class='title'>注册界面，没写，哈哈</h1>

            </div>

            <div id='bottomDiv'>

                <a @click="goLogin">我要登录</a>

            </div>

        </div>

        <div v-show='page==="suc"'>

            <div>

                <h1 class='title'>登录成功</h1>

            </div>

            <div id='bottomDiv'>

                <a @click="exit">退出登录</a>

            </div>

        </div>

        </div>

  </body>

  <script src="vue.js"></script>

    <script>

     new Vue({

      el:'#app',

      data:{

        page:'advert',//默认是倒计时的显示广告 login/register 分别表示登录、注册

        n:5,

        intervalId:'',

        name:'',

        pwd:''

      },

      methods:{

        autoPlay:function(){

            //自动进行到计时

            this.intervalId=setInterval(()=>{

                if(this.n===0){//当倒计时为0的时候，跳转登录界面，并清除定时器

                    this.page='login';//设置page为login

                    clearInterval(this.intervalId);

                    return ;

                }

                this.n--;

            },1000);

        },

        goLogin:function(){//点击到登录界面

            this.page='login';//设置page为login

            clearInterval(this.intervalId);

        },

        add:function(){

            //控制跳转到成功

            this.page='suc';

        },

        goRegister:function(){

            //控制跳转到注册

            this.page='register';

            this.name=this.pwd='';

        },

        exit:function(){

            //控制跳转到登录

            this.page='login';

            this.name=this.pwd='';

        }  

      },

      computed:{

         

      },

      mounted:function(){

        //生命周期 mounted就执行 倒计时函数

        this.autoPlay();

      }

    })

    </script>

         

</html>


链接帖子
意见的链接
分享到其他网站

这个问题有0个答案

推荐的帖子

此问题没有答案

 分享
转到问题列表

黑客攻防讨论组

黑客攻防讨论组

  
    You don't have permission to chat.

    • 最近浏览   0位会员

      • 没有会员查看此页面。

    黑客世界站内导航 (SITE MAP)

    ×
    ×
    • 创建新的...