Vue中过滤器的使用

1. 过滤器的使用方式有两种：

!-- 在双花括号中 --> {{ message | capitalize }} 
<!-- 在 `v-bind` 中 --> 
<div v-bind:id="rawId | formatId"></div>

2. 在src的main.js的入口文件中，直接封装一个过滤器，然后来进行使用，这里就用个日期的数据处理的例子来展示：

// 过滤器
Vue.filter('forMat', (data) => {
  const t = new Date(data)
  console.log(t, 999)
  var yy = t.getFullYear()
  var mm = (t.getMonth() + 1).toString().padStart(2, 0)
  var dd = t.getDate().toString().padStart(2, 0)
  return `${yy}-${mm}-${dd}`
})

3. 它的一个使用的固定方式是Vue.filter(过滤器的名称，处理函数)，在template里面,直接在{{}}里面用|分隔使用，下面的例子中，入职的一个事件是它的第一个参数，format是他的第二个参数，它的具体的对应的使用场景是如下：

 <el-table-column label="入职时间" width="120">
            <template slot-scope="scoped">
              <!-- 管道符 -->
              <!-- {{ scoped.row.timeOfEntry }}==== -->
              {{ scoped.row.timeOfEntry | forMat }}
            </template>
          </el-table-column>