vue显示密码功能

html

 <div class="checkedPassWord">
            <input type="checkbox" id="checkPassWord"  @click="showPassWord" :checked="flag" ref="input"><span>显示密码</span>
        </div>

js 部分

export default {
    name:'resetPassWord',
    components: {
        TopHeader
    },
    data () { 
        return {
            flag:false,
            input1:'',
            input2:''
        }
    },
    methods:{
        // 显示密码
        showPassWord(){
            if (this.$refs.input.checked == true){
               this.$refs.input1.type = 'text';
               this.$refs.input2.type = 'text';
               
            }else{
                this.$refs.input1.type = 'password';
               this.$refs.input2.type = 'password';
            }
        }
    }
}

---

点击选中后：

---

默认：