当前位置：首页 > VUE

vue实现姓名脱敏

2026-02-18 08:14:00VUE

Vue 实现姓名脱敏的方法

在 Vue 中实现姓名脱敏可以通过多种方式，以下是几种常见的方法：

使用计算属性

通过计算属性对姓名进行处理，保留首尾字符，中间用星号替代：

computed: {
  desensitizedName() {
    if (this.name && this.name.length > 1) {
      const firstChar = this.name.charAt(0)
      const lastChar = this.name.charAt(this.name.length - 1)
      return `${firstChar}${'*'.repeat(this.name.length - 2)}${lastChar}`
    }
    return this.name || ''
  }
}

自定义过滤器

创建一个全局过滤器来处理姓名脱敏：

Vue.filter('desensitize', function(value) {
  if (!value) return ''
  if (value.length <= 2) return value.charAt(0) + '*'
  return value.charAt(0) + '*'.repeat(value.length - 2) + value.slice(-1)
})

使用方式：

<p>{{ name | desensitize }}</p>

使用指令方式

创建一个自定义指令来实现脱敏效果：

Vue.directive('desensitize', {
  bind(el, binding) {
    const value = binding.value
    if (value && value.length > 1) {
      const firstChar = value.charAt(0)
      const lastChar = value.charAt(value.length - 1)
      el.textContent = `${firstChar}${'*'.repeat(value.length - 2)}${lastChar}`
    } else {
      el.textContent = value || ''
    }
  }
})

使用方式：

<p v-desensitize="name"></p>

使用工具函数

创建一个单独的工具函数来处理脱敏逻辑：

// utils/desensitize.js
export function desensitizeName(name) {
  if (!name) return ''
  if (name.length <= 2) return name.charAt(0) + '*'
  return name.charAt(0) + '*'.repeat(name.length - 2) + name.slice(-1)
}

在组件中使用：

import { desensitizeName } from '@/utils/desensitize'

export default {
  computed: {
    desensitizedName() {
      return desensitizeName(this.name)
    }
  }
}

处理不同长度的姓名

针对不同长度的姓名可以有不同的脱敏策略：

function desensitizeName(name) {
  if (!name) return ''
  const length = name.length

  if (length === 1) return name
  if (length === 2) return `${name[0]}*`
  if (length === 3) return `${name[0]}*${name[2]}`
  return `${name[0]}${'*'.repeat(length - 2)}${name[length - 1]}`
}

注意事项

vue实现姓名脱敏