vue中element-ui密码显示与隐藏图标变化

在Vue中使用element-ui来实现密码显示与隐藏图标变化可以通过以下步骤实现。

首先，在Vue组件内引入element-ui库，并在相关页面中引入所需的组件。比如使用`el-input`组件来实现输入框，使用`el-icon`组件来显示图标。

接下来，在data中定义一个`passwordVisible`变量，默认值为false，用来控制密码框中的图标显示。同时，设定一个初始密码的值。

然后，在模板中使用`el-input`组件来创建一个密码输入框，通过`v-model`指令绑定一个名为`password`的data属性，用于保存输入的密码。

在密码输入框的右侧，使用`el-icon`组件来显示图标，通过`v-show`指令控制图标的显示与隐藏。当密码可见时，显示一个代表隐藏的图标，例如"el-icon-view"；当密码不可见时，显示一个代表显示的图标，例如"el-icon-view-show"。

接下来，为图标绑定一个点击事件，当点击图标时，修改`passwordVisible`变量的值。如果`passwordVisible`为false，则表示密码不可见，这时将其改为true；如果`passwordVisible`为true，则表示密码可见，这时将其改为false。

同时，通过`v-bind:class`指令给图标绑定一个class样式，根据`passwordVisible`的值来改变图标的样式。例如，当`passwordVisible`为false时，给图标加上一个加密的样式，表示密码不可见；当`passwordVisible`为true时，给图标加上一个解密的样式，表示密码可见。

最后，根据`passwordVisible`的值，通过`v-if`指令判断密码框中显示的内容。若`passwordVisible`为false，则显示密文密码，保护用户的隐私；若`passwordVisible`为true，则显示明文密码，方便用户查看。

通过以上的步骤，就可以实现在Vue中使用element-ui来实现密码显示与隐藏图标变化的效果。用户点击图标，可以方便地切换密码的可见与隐藏状态。