Vue实现密码框的显示隐藏切换

 

通过vant表单,结合v-show使密码框和文本框展示或隐藏输入内容

代码如下:

<van-form @submit="onSubmit">
                <van-field
                        v-model="password"
                        type="password"
                        name="密码"
                        label="密码"
                        placeholder="请输入密码"
                        :rules="[{ required: true}]"
                        right-icon="closed-eye"
                        v-show="isPassword"
                        @click-right-icon="showPassword"/>
                <van-field
                        v-model="password"
                        type="text"
                        name="密码"
                        label="密码"
                        right-icon="eye-o"
                        v-show="!isPassword"
                        @click-right-icon="showPassword"/>
</van-form>

 

 

data() {
            return {
                password: ‘‘,
                isPassword:true
            }
},
methods: {
            showPassword(){ // 显示隐藏密码
                this.isPassword = !this.isPassword
            },
            onSubmit(values) {
                console.log(‘submit‘, values)
            }
}

 

实现效果如下:

Vue实现密码框的显示隐藏切换

Vue实现密码框的显示隐藏切换

上一篇:try-catch 回滚事务,避免回滚失效的操作


下一篇:Typescript(十三)泛型