vue基于input实现密码的显示与隐藏功能

<template>
    <div class="private">
        <!--// 显示内容: ==0时显示*，==1时显示密钥内容 -->
        <span v-if="codeType == 1">{{privates}}</span>
        <span class="special" v-if="codeType == 0">{{star}}</span>
        <!--// 小图标: ==0时展示隐藏图标，==1时展示显示图标-->
        <span v-if="codeType == 1"><img @click="reveal" src="https://s4.ax1x.com/2022/01/07/79E7dg.png"></span>
        <span v-if="codeType == 0"><img @click="conceal" src="https://s4.ax1x.com/2022/01/07/79EOWn.png"></span>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                privates: "123456789123456789123456789", //密钥内容
                codeType: 0, //控制密钥显示隐藏 等于1时显示，等于0时隐藏
                star: "", //要插入的星星*
            }
        },
        mounted() {
            // 循环遍历拿到密钥的长度
            for (var i = 0; i < this.privates.length; i++) {
                let star = this.star.split('') //分割成字符串数组
                star.splice(this.privates.length, this.privates.length, '*') //添加到数组
                this.star = star.join('') //将数组转换为字符串
            }
        },
        methods: {
            //显示事件
            reveal() {
                this.codeType = 0
            },
            //隐藏事件
            conceal() {
                this.codeType = 1
            },
        }
    }
</script>

<style scoped>
    .private {
        display: flex;
        align-items: center;
    }

    .private img {
        width: 20px;
        height: 20px;
        vertical-align: middle;
        cursor: pointer;
        margin-left: 9px;
    }

    .special {
        position: relative;
        top: 4px;
    }
</style>

data() {
  return {
    showPwd: false,
    pwd: ''
  }
}

<input type="text" maxlength="8" placeholder="密码" v-if="showPwd" v-model="pwd">
<input type="password" maxlength="8" placeholder="密码" v-else v-model="pwd">

<div class="switch_button off" :class="showPwd?'on' : 'off'" @click="showPwd=!showPwd">
    <div class="switch_circle" :class="{right: showPwd}"></div>
    <span class="switch_text">{{ showPwd ? 'abc' : '...'}}</span>
</div>