vue3-登录表单--输入密码框小眼睛切换问题

在Vue 3中，实现登录表单的密码框小眼睛切换功能，可以通过使用v-model来绑定输入框的值，并通过一个布尔型数据属性来控制小眼睛的显示状态。以下是一个简单的示例：

<template>
  <div class="login-form">
    <input type="text" placeholder="Username" v-model="username" />
    <input
      :type="passwordFieldType"
      placeholder="Password"
      v-model="password"
    />
    <button @click="login">Login</button>
    <button @click="togglePasswordVisibility">
      <span v-if="!showPassword">Show</span>
      <span v-else>Hide</span>
      Password
    </button>
  </div>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    const username = ref('');
    const password = ref('');
    const showPassword = ref(false);
 
    const passwordFieldType = computed(() => (showPassword.value ? 'text' : 'password'));
 
    const togglePasswordVisibility = () => {
      showPassword.value = !showPassword.value;
    };
 
    const login = () => {
      // 登录逻辑
    };
 
    return {
      username,
      password,
      showPassword,
      passwordFieldType,
      togglePasswordVisibility,
      login
    };
  }
};
</script>
 
<style>
/* 样式内容 */
</style>

在这个示例中，我们使用了计算属性passwordFieldType来动态地决定密码输入框的类型。当showPassword的值为true时，输入框显示为文本框，用户可以看到输入的密码；当showPassword的值为false时，输入框显示为密码框，用户看不到输入的密码内容。用户可以通过点击"Show/Hide Password"按钮来切换这两种显示状态。