如何在v-text-field中隐藏用户名除末尾字符外的输入内容？

嘿，这个需求其实不用找额外的npm包，咱们利用Vuetify的事件和数据绑定就能轻松搞定！核心思路是把实际存储的完整姓名和文本框显示的掩码姓名分开处理，同时在聚焦/失焦时切换显示状态，确保用于业务逻辑的变量始终保留完整值。

完整实现代码 #

<template>
  <ValidationProvider>
    <v-text-field
      hide-details="auto"
      v-model="displayName"
      label="username"
      placeholder="type your name"
      @focus="onFocus"
      @blur="onBlur"
    />
  </ValidationProvider>
</template>

<script>
export default {
  data() {
    return {
      YourName: '', // 存储完整姓名，用于提交数据库、结账自动填充等操作
      displayName: '' // 文本框的显示内容，根据状态切换完整值/掩码
    }
  },
  watch: {
    // 当实际姓名从外部更新（比如从数据库获取）时，自动同步掩码显示
    YourName(newVal) {
      this.displayName = this.maskName(newVal)
    }
  },
  methods: {
    // 生成掩码姓名：除最后一个字符外，其余替换为*
    maskName(name) {
      if (!name) return ''
      if (name.length === 1) return name
      return '*'.repeat(name.length - 1) + name.slice(-1)
    },
    // 聚焦文本框时，显示完整姓名方便编辑
    onFocus() {
      this.displayName = this.YourName
    },
    // 失焦时切换回掩码，同时同步编辑后的内容到实际存储变量
    onBlur() {
      this.YourName = this.displayName
      this.displayName = this.maskName(this.YourName)
    }
  }
}
</script>

关键逻辑说明 #

• 双变量分离：YourName是核心业务变量，始终存储完整姓名，完全不影响你后续提交数据库或结账自动填充的逻辑；displayName仅负责文本框的显示，和用户交互。
• 掩码生成：maskName函数会自动处理姓名格式，比如输入“Allen Walker”会转换成“**********r”，单字符姓名则直接显示（避免出现空掩码）。
• 聚焦/失焦切换：
  • 点击文本框（聚焦）时，自动切换到完整姓名显示，让用户可以正常编辑全部内容；
  • 离开文本框（失焦）时，先把编辑后的内容同步到YourName，再切换回掩码显示，兼顾安全性和编辑体验。
• 外部更新同步：通过watch监听YourName，如果从数据库加载用户姓名，会自动生成对应的掩码显示，无需额外手动处理。

效果验证 #

完全符合你的期望：

1. 用户输入“Allen Walker”时，聚焦状态下看到完整内容，失焦后显示掩码；
2. YourName始终存储完整的“Allen Walker”，可直接用于后续业务操作；
3. 资料页中，未点击文本框时显示掩码，点击后显示完整姓名可编辑。

内容的提问来源于stack exchange，提问作者MonLes