切换el-input可见性
时间: 2023-12-22 16:28:26 浏览: 38
可以通过设置`type`属性为`password`来实现切换`el-input`的可见性。当`type`属性为`password`时,输入的内容会被隐藏,而当`type`属性为`text`时,输入的内容会被显示。可以通过点击一个按钮来切换`el-input`的`type`属性值,从而实现可见性的切换。
以下是一个示例代码:
```html
<template>
<div>
<el-input v-model="password" :type="inputType"></el-input>
<el-button @click="toggleInputType">{{ buttonText }}</el-button>
</div>
</template>
<script>
export default {
data() {
return {
password: '',
inputType: 'password',
buttonText: '显示密码'
}
},
methods: {
toggleInputType() {
if (this.inputType === 'password') {
this.inputType = 'text'
this.buttonText = '隐藏密码'
} else {
this.inputType = 'password'
this.buttonText = '显示密码'
}
}
}
}
</script>
```