uniapp设置input为密码输入框,并且可以查看密码
时间: 2024-03-25 10:36:37 浏览: 146
密码输入框
要实现设置 `input` 为密码输入框并可以查看密码,可以在 `input` 标签中动态切换 `type` 属性的值,代码示例如下:
```html
<template>
<div>
<input :type="showPassword ? 'text' : 'password'" v-model="password">
<button @tap="togglePassword">{{ showPassword ? '隐藏密码' : '显示密码' }}</button>
</div>
</template>
<script>
export default {
data() {
return {
password: '',
showPassword: false
}
},
methods: {
togglePassword() {
this.showPassword = !this.showPassword
}
}
}
</script>
```
这样在默认情况下 `input` 标签的 `type` 属性值为 `password`,当点击按钮后可以动态切换为 `text`,从而实现查看密码的功能。
阅读全文