方法一:使用element直接可以用的,密码显示隐藏功能
<el-input placeholder="请输入密码" v-model="input" show-password></el-input>
<script>
export default {
data() {
return {
input: ''
}
}
}
</script>
方法2、
<el-form-item label prop="passWord">
<el-input v-model="formData.passWord" placeholder="请输入密码" :type="type"></el-input>
<i class="" @click="flags=!flags" :class="formData.passWord?elIcons:''"></i>
</el-form-item>
//data定义值
return {
flags: false,
}
//使用computed
computed: {
type() {
return this.flags ? 'text' : 'password'
},
elIcons() {
return this.flags ? 'el-icon-view' : 'iconfont iconbiyanjing'
}
},
Vue——密码框显示和隐藏密码功能
于 2021-12-20 21:02:13 首次发布