VUE2 过滤器

基础过滤器

过滤器可以用在 “插值语法” 和 “指令语法” 中，但不能用在 “v-model” 中。

<script src="dayjs.min.js"></script> <!-- 计算时间戳需要引入dayjs -->
<h3>{{time | timeFormater}}</h3>     <!-- timeFormater将time当作参数传timeFormater函数，然后将return值替换掉“time | timeFormater” -->
<script>
    data(){
        return{
            time: 1621561377603
        }
    },
    filters:{
        timeFormater(){
            return dayjs.format('YYY年MM月DD日 HH:mm:ss')
        }
    }
</script>

过滤器可以接收额外参数

<h3>{{time | timeFormater(3)}}</h3>  <!-- timeFormater过滤器可以接收多个参数 -->
<script>
    data(){
        return{
            time: 1621561377603
        }
    },
    filters:{
        timeFormater(value){
            return dayjs.format('YYY年MM月DD日 HH:mm:ss')
        }
    }
</script>

多个过滤器可以串联

<h3>{{time | timeFormater | mySlice}}</h3>

全局过滤器

// 注意：全局要用 filter，而局部要用 filters
Vue.filter('timeFormater', function(value){
    return dayjs.format('YYY年MM月DD日 HH:mm:ss')
})