VUE.js 登陆窗口密码输入框实现密码隐藏与显示

本文链接： https://blog.csdn.net/TGBTrial/article/details/101055183

实现需要掌握四个知识点（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

VUE.js 登陆窗口密码输入框实现密码隐藏与显示

猜你喜欢