vue实现输入框密码的隐藏与显示

最新推荐文章于 2024-06-26 15:51:34 发布

svt20150526

最新推荐文章于 2024-06-26 15:51:34 发布

阅读量1k

点赞数 2

文章标签： vue vue.js

本文链接：https://blog.csdn.net/seventeen0526/article/details/115357664

版权

本文介绍了如何在Vue中实现输入框密码的隐藏与显示功能。通过点击图标，利用v-if和v-else指令切换密码的可见状态，详细讲解了相关代码及实现效果。

摘要由CSDN通过智能技术生成

学习目标：

vue实现输入框密码的显示和隐藏

代码内容：

通过点击红心实现密码的显示和隐藏，初始默认为隐藏。

//template中代码：
<div class="pwd">
		<label>密码：
		<br />
        </label>
        <input type="password" name="passwd" v-if="show" placeholder="input the passwd">
        <input type="text" name="passwd" v-else placeholder="input the passwd">
        <div class="password-show" @click="pwd_show">❤</div>
</div>

//script中代码：
export default {
    data(){
        return{
            show: true//初始为隐藏状态
        }
    },
    methods:{
        pwd_show:function(){//红心按钮定义方法
            this.show = !this.show
        },