版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
实现需要掌握四个知识点(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