filter过滤器使用方法以及正则替换replace使用方法

<template>
  <div>
    <table>
      <thead>
        <tr>
          <td>序号</td>
          <td>姓名</td>
          <td>年龄</td>
          <td>手机号</td>
          <td>婚姻状态</td>
          <td>学历</td>
          <td>政治面貌</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(emp, i) in emps" :key="i">
          <td>{{ i + 1 }}</td>
          <td>{{ emp.name }}</td>
          <td>{{ emp.age }}</td>
          <td>{{ emp.phone | phone }}</td>
          <td>{{ emp.married | married }}</td>
          <td>{{ emp.xl | xl }}</td>
          <td>{{ emp.zzmm | zzmm }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  filters: {
    zzmm(value) {
      return ["群众", "少先队员", "共青团员", "党员", "预备党员"][value];
    },
    xl(value) {
      // 数据库中存储选项, 通常都是用数字. 0 1 2 3...
      // 为了搭配数组使用.  数组[序号]
      return ["文盲", "小学", "中学", "大学", "硕士"][value];
    },
    married(value) {
      return value ? "已婚" : "未婚";
    },
    phone(value) {
      // JS高级最后一天, 正则替换
      return value.replace(/(\d{3})(\d{4})(\d{4})/, "$1-$2-$3");
    },
  },

  data() {
    return {
      emps: [
        {
          name: "凯凯1",
          age: 23,
          phone: "18833332323",
          married: true,
          xl: 0,
          zzmm: 0,
        },
        {
          name: "凯凯2",
          age: 43,
          phone: "18845789323",
          married: false,
          xl: 1,
          zzmm: 1,
        },
        {
          name: "凯凯3",
          age: 33,
          phone: "18887872323",
          married: true,
          xl: 2,
          zzmm: 2,
        },
        {
          name: "凯凯4",
          age: 43,
          phone: "18839809623",
          married: false,
          xl: 3,
          zzmm: 3,
        },
        {
          name: "凯凯5",
          age: 35,
          phone: "18835465723",
          married: true,
          xl: 4,
          zzmm: 4,
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
table {
  border-collapse: collapse;

  thead {
    background-color: #eee;
  }

  td {
    border: 1px solid gray;
    padding: 10px 30px;
  }
}
</style>