标签：

要动态更改 <el-input> 组件中的密码图标，您可以使用 <template> 模板和条件渲染的方式来实现。以下是一个示例代码：

<template>
  <el-input
    v-model="password"
    :type="showPassword ? 'text' : 'password'"
    suffix-icon="icon"
  ></el-input>
</template>

<script>
export default {
  data() {
    return {
      password: '', // 密码值
      showPassword: false, // 是否显示密码
      icon: 'el-icon-eye', // 密码图标
    };
  },
  methods: {
    togglePassword() {
      // 切换是否显示密码
      this.showPassword = !this.showPassword;
      // 根据显示与否设置密码图标
      if (this.showPassword) {
        this.icon = 'el-icon-eye-off';
      } else {
        this.icon = 'el-icon-eye';
      }
    },
  },
};
</script>

在上述代码中，<el-input> 组件的 type 属性使用了一个动态的绑定。type 的值会根据 showPassword 的状态来切换为 'text' 或 'password'。showPassword 的状态会在 togglePassword() 方法中根据用户操作进行切换，并且同时更新 icon 属性来动态改变密码图标的样式。

此外，通过 suffix-icon 属性将 icon 的值应用于 <el-input> 组件的后缀图标。

您可以将上述代码应用到您的 Vue.js 项目中，并根据需要进行适当的样式调整。

希望这个示例能满足您的需求。

标签：
来源：

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。