vue 多条手机号码中间用****代替

在Vue.js中，如果你需要展示一列包含手机号码的数据，并希望对某些敏感信息如中间四位数字进行替换，你可以通过模板渲染和JavaScript处理结合来实现。以下是一个简单的例子：

<template>
  <div v-for="(phone, index) in phones" :key="index">
    {{ phone | maskPhone }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      phones: ['13800138000', '15012345678', '13987654321']
    };
  },
  filters: {
    // 定义一个maskPhone过滤器
    maskPhone(phone) {
      if (phone) {
        // 使用字符串的substring方法截取并替换中间四位
        return `${phone.slice(0, 3)}****${phone.slice(-4)}`;
      }
      return phone;
    }
  }
};
</script>

在这个例子中，我们创建了一个名为`maskPhone`的过滤器，它接收一个电话号码作为参数，如果电话号码存在，则会显示前三位、中间四个星号（****）、以及最后四位。