VUE.js 登陸窗口密碼輸入框實現密碼隱藏與顯示

實現需要掌握四個知識點（ref、input、v-show、v-model）：

一、ref的使用
ref擁有很多的用法，在這裏我們使用ref給元素或組件註冊引用信息，然後通過$ref獲取信息。

舉例：
<template>
	<div id="app">
		<div ref=focusDom>You're pretty</div>
		<button @click="getData">獲得數據</button>
	</div>
</template>
<script>
export default{
	methods:{
		getData(){
			console.log(this.$refs.focusDom)
		}
	}
}
這裏在console中獲取到的是:<div>You're pretty</div>
我們使用ref的這個特點來獲取我們輸入到密碼框中的數據

二、input中type的使用

<input>中type屬性包括多種，默認爲text，即定義一個單行的文本字段

語法：<input type="value">

這裏我們要用到的屬性是：password，即定義密碼字段（字段中的字符會被隱藏）

三、v-show的使用

v-show根據條件展示元素，與v-if不同的是帶有v-show的元素始終會被渲染並保留在DOM中，其僅僅是簡單的切換元素的css屬性display

<div v-show="awesome">你好</div>
<!-- 如果awesome爲真，則展示該div -->
<!-- 如果awesome爲假，則不展示該div -->

四、v-model的使用

<input v-model="test">本質上是<input :value="test" @input="test = $event.target.value">

其中的@input是對輸入事件的監聽，:value="test"則是將監聽到的數據放入input中，v-model除了可以給input賦值以外還可以獲取input中的數據（數據的獲取是實時的）
爲了讓大家理解的更深刻，請看下圖：
input中不加入v-model

input中加入v-model

五、代碼綜合實現

HTML

<!-- 密碼輸入框 -->
<input ref="passWord" placeholder="請輸入密碼..." type="password" v-model="passWord" v-show="!showPass"/>
<input ref="passWord" placeholder="請輸入密碼..." type="text" v-model="passWord" v-show="showPass"/>
<!-- 密碼隱藏顯示按鈕 -->
<div @click="showPass = ! showPass">
	<span v-show="showPass"><img src="static\pictureV1.0\Login\icon\眼睛_顯示.png"></span>
	<span v-show="!showPass"><img src="static\pictureV1.0\Login\icon\眼睛_隱藏.png"></span>
</div>
<!-- 登陸按鈕 -->
<button @click="toLoading">

JS

<script>
	export default{
		data(){
			return{
				passWord:null,
				showPass:false,
			}
		},
		methods:{
			thLoadding(){
				var vm=this;
				//獲取密碼
				vm.passWord = vm.$refs.passWord.currentValue
			}
		}
	}
</script>

最開始定義showPass初始值爲false，當我們點擊小眼睛時，showPass的值會發生改變從而條件性的分別展示兩個input元素（一個用密碼替換，一個爲實際輸入內容），利用ref將輸入到密碼框中的值取出傳回後端實現驗證登陸。

推薦圖標庫鏈接：
阿里巴巴矢量庫iconfont
關於ref的參考資源:
https://www.jianshu.com/p/623c8b009a85
https://www.cnblogs.com/xumqfaith/p/7743387.html
關於input參考資源：
https://www.runoob.com/tags/att-input-type.html
關於v-show參考資源：
https://cn.vuejs.org/v2/guide/conditional.html?#v-show