Vue.js 实现密码显示隐藏功能：小眼睛图标切换

<template>
  <div>
    <input
      type="password"
      :type="showPassword ? 'text' : 'password'"
      v-model="password"
    />
    <span @click="toggleShowPassword">
      {{ showPassword ? '隐藏密码' : '显示密码' }}
    </span>
  </div>
</template>
<script>
export default {
  data() {
    return {
      password: '',
      showPassword: false,
    };
  },
  methods: {
    toggleShowPassword() {
      this.showPassword = !this.showPassword;
    },
  },
};
</script>
<p>在上面的示例中，我们使用了一个 input 元素来输入密码，类型为 'password'。我们还使用了一个 span 元素来切换显示密码的状态。当点击 span 元素时，触发 toggleShowPassword 方法，该方法会切换 showPassword 属性的值，从而改变 input 元素的类型。如果 showPassword 为 true，则显示明文文本；如果为 false，则显示密码。</p>
<p>您可以将上述代码作为一个 Vue 组件，并将其用在您的应用程序中。</p>