在vue中，用element设置密码输入框，通过睁眼和闭眼来控制密码显示与隐藏

您可以在element的密码输入框中使用eye-icon和closed-eye-icon，通过绑定v-if来控制这两个icon的显示和隐藏，来实现密码的显示和隐藏。具体实现方法如下：

1.在input上绑定v-if属性

<el-input type="password" v-model="password">
  <template v-slot:append>
    <i
      class="el-input__icon el-icon-eye"
      v-if="showEye"
      @click="showEye = false"
    ></i>
    <i
      class="el-input__icon el-icon-close-eye"
      v-if="!showEye"
      @click="showEye = true"
    ></i>
  </template>
</el-input>

2.在data中定义showEye属性

data() {
  return {
    password: '',
    showEye: false
  }
}

这样就可以实现在输入密码时，通过点击眼睛icon来切换密码的显示和隐藏了。

相关问题

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来实现密码显示与隐藏图标变化的效果。用户点击图标，可以方便地切换密码的可见与隐藏状态。

vue2密码输入框眼睛设置

在Vue2中，可以通过使用自定义指令和绑定属性来实现密码输入框眼睛设置。下面是一个示例代码：

<template>
  <div>
    <input type="password" v-model="password" />
    <i class="password-eyes" v-show="showPassword" @click="togglePassword">
      <img :src="showPassword ? require('./open-eye.png') : require('./close-eye.png')" />
    </i>
  </div>
</template>

<script>
export default {
  data() {
    return {
      password: '',
      showPassword: false
    };
  },
  methods: {
    togglePassword() {
      this.showPassword = !this.showPassword;
    }
  }
};
</script>

在上面的代码中，我们使用了一个`input`元素来实现密码输入框，并使用`v-model`指令将输入的密码绑定到`password`变量上。通过使用`v-show`指令，我们可以根据`showPassword`变量的值来控制眼睛图标的显示和隐藏。当点击眼睛图标时，我们通过`togglePassword`方法来切换`showPassword`变量的值，从而实现密码的可见和隐藏。

请注意，上述代码中的图片路径是示例路径，你需要根据实际情况修改为正确的图片路径。