当前位置：首页 > VUE

vue实现姓名脱敏

2026-03-09 21:17:36VUE

Vue 实现姓名脱敏的方法

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

使用计算属性脱敏

<template>
  <div>{{ maskedName }}</div>
</template>

<script>
export default {
  data() {
    return {
      name: '张三丰'
    }
  },
  computed: {
    maskedName() {
      if (this.name.length <= 1) return this.name
      return this.name.charAt(0) + '*'.repeat(this.name.length - 1)
    }
  }
}
</script>

使用过滤器脱敏

<template>
  <div>{{ name | maskName }}</div>
</template>

<script>
export default {
  data() {
    return {
      name: '李四'
    }
  },
  filters: {
    maskName(value) {
      if (!value) return ''
      if (value.length <= 1) return value
      return value.charAt(0) + '*'.repeat(value.length - 1)
    }
  }
}
</script>

使用自定义指令脱敏

<template>
  <div v-mask-name="name"></div>
</template>

<script>
export default {
  data() {
    return {
      name: '王五'
    }
  },
  directives: {
    'mask-name': {
      bind(el, binding) {
        const name = binding.value
        if (name.length <= 1) {
          el.textContent = name
        } else {
          el.textContent = name.charAt(0) + '*'.repeat(name.length - 1)
        }
      }
    }
  }
}
</script>

使用方法脱敏

<template>
  <div>{{ maskName(name) }}</div>
</template>

<script>
export default {
  data() {
    return {
      name: '赵六'
    }
  },
  methods: {
    maskName(name) {
      if (!name) return ''
      if (name.length <= 1) return name
      return name.charAt(0) + '*'.repeat(name.length - 1)
    }
  }
}
</script>

不同脱敏规则实现

*保留姓氏，名字用代替

function maskName(name) {
  if (!name) return ''
  if (name.length <= 1) return name
  return name.charAt(0) + '*'.repeat(name.length - 1)
}

*保留首尾字符，中间用代替

function maskName(name) {
  if (!name) return ''
  if (name.length <= 2) return name
  return name.charAt(0) + '*'.repeat(name.length - 2) + name.charAt(name.length - 1)
}

复姓处理

vue实现姓名脱敏

function maskName(name) {
  if (!name) return ''
  const compoundSurnames = ['欧阳', '上官', '司马', '诸葛'] // 常见复姓列表
  for (const surname of compoundSurnames) {
    if (name.startsWith(surname)) {
      return surname + '*'.repeat(name.length - surname.length)
    }
  }
  if (name.length <= 1) return name
  return name.charAt(0) + '*'.repeat(name.length - 1)
}