vue从创建到完整的饿了么（6）登录注册页面及密码的暗明文转换

说明

1.上一章--v-for,v-bind以及计算属性
2.苍渡大神的源码地址--Github地址
3.UI框架--Mint UI
4.数据接口地址--Github地址
5.下一章--点击事件与页面跳转

开始

1.先看一下目前的效果

现在来分析一下这个页面要什么交互

• 头部 登录|注册 按钮点击进入登录注册页面（登录注册一个页面）
• 点击 天津 或者其他的城市都跳转到 城市详情的页面

登录注册页面

1.先看一下登录页面UI图

2.在src文件夹下的page文件夹新建login文件夹，在login中新建login.vue文件，代码如下

3.页面创建了，咱们怎么访问呢？配置路由！打开src文件夹下的router下的routers.js修改如下

ok，将页面的地址改为http://localhost:1999/#/login，出现白页，是因为咱们还没有写样式。

3.现在写样式,<template></template>修改如下

<template>
 <div>
    <mt-header title="密码登录" class='fs1-2' fixed>
        <mt-button slot="left"><mt-button icon="back"></mt-button></mt-button>
        <mt-button>登录</mt-button>
    </mt-header>

    <form>
    <div class='padtop40'>
        <mt-field class='mgtop10 after' placeholder="账号"></mt-field>
        <mt-field class='after' placeholder="密码" type="password">
            <mt-switch ></mt-switch>
        </mt-field>
        <mt-field class='after'  placeholder="验证码">
            <img src="" height="45px" width="100px">
        </mt-field>
    </div>
    </form>

    <div class="padlr10 fs0-8 colred">
        <p>温馨提示:未注册过的账号，登录时自动注册</p>
        <p>注册过的用户可凭账号密码登录</p>
    </div>

    <div class="padlr10">
      <mt-button size="large" type="primary">登录</mt-button>
    </div>

    <div class="padlr10 mgtop10">
      <span class='col right'>重置密码</span>
    </div>
  </div>
</template>

这里只加了一个样式colred，其他的都是以前就定义的。页面如下

4.样式差不多了，现在是功能了。先写密码的暗明文转换。

1. 首先我们要知道当前密码是明文还是暗文，但是密码的状态是由密码后面的开关来控制的，所以我们要定义一个变量value来记录开关的状态即可。

 data () {
    return {
      value:true
    }
  },

value用true和false来记录开关的开关的状态，但是我们怎么把value与开关绑定起来呢？这个Mint ui在例子中已经写出

在前文中用到的v-bind是用数据来驱动DOM，是单向绑定，但是V-model是双向绑定，及数据改变时DOM改变，但是DOM改变时数据也会改变。修改<mt-switch ></mt-switch>为

<mt-switch v-model="value"></mt-switch>

现在可以得到开关的状态了，但是怎么来改变密码的状态呢？各位老铁别急，还记得咱们上一章用到的计算属性么--只需调用一次计算属性，当与计算属性相关的属性改变时，计算属性的返回结果也会随之改变，无需重新调用！computed代码修改如下

computed:{
  //计算属性
    mytype:function(){
     return this.value?'password':''    
    }
  },

返回的是password或者空，所以我们绑定到密码框的type上即可（切记绑定属性用v-bind:简写为:）

<mt-field class='after' placeholder="密码" :type="mytype">

整体代码如下

<template>
  <div>
    <mt-header title="密码登录" class='fs1-2' fixed>
        <mt-button slot="left"><mt-button icon="back"></mt-button></mt-button>
        <mt-button>登录</mt-button>
    </mt-header>

    <form>
    <div class='padtop40'>
        <mt-field class='mgtop10 after' placeholder="账号"></mt-field>
        <mt-field class='after' placeholder="密码" :type="mytype">
            <mt-switch v-model="value"></mt-switch>
        </mt-field>
        <mt-field class='after'  placeholder="验证码">
            <img src="" height="45px" width="100px">
        </mt-field>
    </div>
    </form>


    <div class="padlr10 fs0-8 colred">
        <p>温馨提示:未注册过的账号，登录时自动注册</p>
        <p>注册过的用户可凭账号密码登录</p>
    </div>

    <div class="padlr10">
      <mt-button size="large" type="primary">登录</mt-button>
    </div>

    <div class="padlr10 mgtop10">
      <span class='col right'>重置密码</span>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      value:true
    }
  },
  component:{
  //注册组件

  },
  mounted:function(){
  //生命周期
      
  },
  computed:{
  //计算属性
    mytype:function(){
     return this.value?'password':''
      
    }

  },
  methods:{
  //函数

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

试试密码是否可以切换（我笨不会做动态图!）

ok!页面基本搞定，咱们现在回到home.vue，写点击事件。