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，寫點擊事件。