VUE学习（三） 过滤器实践（filters）

前端展示数据的过程中，难免需要对一些数据进行二次加工，比如后台返回的性别代码，1男0女，以及日期等格式需要前端进行转化，如果像男女这种简单的直接用三元表达式就可以，如

{ {sex==1?'男':'女'}} 

但是如果需要一些复杂的逻辑时，在或括号中写的话，可读性比较差，而且实现起来也比较麻烦，这样就使用到了过滤器。

 实例：后台返回的表单数据中，有一项是返回的整数秒，前端需要展示  HH:mm:ss的格式。

---

       <el-table-column label="时长" >
          <template slot-scope="scope">
            {
  {scope.row.stopTimes | reWriteTimes}}
          </template>
        </el-table-column>

上面使用到了“|”这个符号，这个是管道符，前面是过滤器传入的参数，后面则是过滤器的名称。我们再js后面定义过滤器

        filters: {
            reWriteTimes: function (value) {
                if (!value) return ''
                let hour = Math.floor((value % 86400) /