【原理】vue的v-if和v-else、v-bind实现的登录界面案例

来源：互联网发布：网络老虎机网站大全编辑：程序博客网时间：2024/06/10 06:06

前几天做了，今天又忘记了。所以再看一看。

要求：

在输入用户名和密码后，按钮颜色发生变化。

<template>  <div class="login">    <div class="input-group">      <!-- v-if和v-else实现不同样式转换 -->      <span class="spanfont" v-if="username"><i class="fa fa-user"></i></span>      <span v-else><i class="fa fa-user"></i></span>      <input type="text" class="username" placeholder="用户名" v-model="username">      <!-- v-bind实现不同样式转换 -->      <span class="fa fa-lock" v-bind:class="{'spanfont':password}"></span>      <input type="password" class="password" placeholder="密码" v-model="password">      <div class="auto">        <input type="checkbox" class="rember" name="" id="">记住密码        <input type="checkbox" class="autologin" name="" id="">自动登录      </div>      <button class="loginbtn1" v-if="username&&password">登录</button>      <button class="loginbtn" v-else>登录</button>    </div>  </div></template><script>  export default {    name: 'login',    data () {      return {        username: '',        password: ''      }    }  }</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>  *{    box-sizing: border-box;    margin:0 auto;    /*font-family:"微软雅黑";*/  }  .input-group{    width:300px;  }  .input-group .username,.password{    width:100%;    height:30px;    margin:3px auto;    padding-left:30px;    padding-right:10px;    /* border:none; */    outline:none;    top:0;    right:0;  }  .auto{    width:80%;    margin:auto;    font-size: 12px;    text-align: center;  }  .input-group .rember,.autologin{    text-align: justify;  }  .input-group span{    width:30px;    height: 30px;    margin:3px auto;    line-height:30px;    text-align: center;    position: absolute;  }  .spanfont{    color:#009FE9;    text-shadow:0 0 10px #99ffff;  }  button{    margin-top:10px;    border:none;    outline: none;    cursor: pointer;  }  .loginbtn{    background-color:#999999;    color:#ffffff;    margin:10px 50px 0 50px;    width:200px;    height:30px;    transition: .3s;  }  .loginbtn1{    background-color:#009FE9;    color:#ffffff;    margin:10px 50px 0 50px;    width:200px;    height:30px;    box-shadow:0 0 10px #0099ff;    transition: .3s;  }</style>

阅读全文

0 0