vue3隐藏手机号码中间几位

在 Vue.js 3 中，如果你想隐藏手机号码的中间几位，可以创建一个自定义指令或者使用模板字符串的插值表达式结合过滤器来实现。这里提供两种简单的方法：

1. **自定义指令**:
首先，在组件中注册一个自定义指令，然后在需要的地方使用该指令。

Vue.directive('maskPhoneNumber', {
  bind(el, binding, vnode) {
    el.textContent = `${binding.value.slice(0, 3)}...${binding.value.slice(-4)}`
  }
})

在模板中应用这个指令：

<div v-mask-phonenumber="phoneNumber">显示部分...</div>

这里的 `phoneNumber` 是你的手机号数据属性。

2. **模板字符串与过滤器**:
如果你不想全局注册指令，也可以在模板内直接处理：

<p>{{ phoneNumber | phoneMask : '****-****-****' }}</p>

在你的 Vue 实例里，添加这样一个过滤器：

export default {
  filters: {
    phoneMask(value, mask) {
      return value.replace(/\d/g, match => (match < 4 ? '*' : match)).slice(0, -4) + '-...-' + value.slice(-4);
    }
  },
}

在这两个例子中，`****-****-****` 表示你想要隐藏的模式。