09-VUE的过滤器

09-过滤器

---

1.前言

当我们想将一个包含当前时间戳的vm实例data的属性转换为“xxxx年xx月xx日”的格式，可以使用VUE的计算属性跟侦测属性实现

dayjs().format()是外部引入的JS库-dayjs()自备的转换时间戳的方法

<!-- 计算属性实现 -->
<h2>现在时间是：{{fmtTime}}</h2>

computed:{
    fmtTime(){
        return dayjs(this.time).format('YYYY年MM月DD日 HH时mm分ss秒')
    }
},

<!-- 事件属性实现 -->
<h2>现在时间是：{{getFmtTime()}}</h2>

methods:{
    getFmtTime(){
        return dayjs(this.time).format('YYYY年MM月DD日 HH时mm分ss秒')
    }
},

然后我们还可以使用VUE中的过滤器解决

---

2.过滤器

定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
语法：
1.注册过滤器：Vue.filter(name,callback)（全局过滤器） 或 new Vue{filters:()}（局部过滤器）
2.使用过滤器：{(xxx | 过滤器名}} 或 v-bind:属性=“xxx | 过滤器名”

<!-- 过滤器实现 -->
<h2>现在时间是：{{time | filFmtTime}}</h2>

filters:{
    filFmtTime(value){ 
        return dayjs(value).format('YYYY年MM月DD日 HH时mm分ss秒')
    },
}

3.备注

​ 1.过滤器也可以接收额外参数、多个过滤器也可以串联

<!-- 过滤器传参 -->
<h2>现在时间是：{{time | filFmtTime1("YYYY_MM_DD")}}</h2>

filters:{
    filFmtTime1(value,str="YYYY年MM月DD日 HH时mm分ss秒"){
        return dayjs(value).format(str)
    },
}

<!-- 多个过滤器 -->
<h2>现在时间是：{{time | filFmtTime1("YYYY_MM_DD") | mySlice}}</h2>

filters:{
    filFmtTime1(value,str="YYYY年MM月DD日 HH时mm分ss秒"){
        return dayjs(value).format(str)
    },
    mySlice(value){
        return value.slice(0,4)
    },
}

​ 2.并没有改变原本的数据，是产生新的对应的数据
​ 3.过滤器除了能在插值语法还能用在指令语法（v-bind）中，但是不能使用与（v-model）中

<h2 :x="msg | mySlice">你好</h2>

new Vue({
    el:'#root',
    data:{
        msg:'你好，世界',
    },
    filters:{
        mySlice(value){
            return value.slice(0,4)
        },
    }
})

<h2 v-model="msg | mySlice"></h2>

​ 4.过滤器分为全局过滤器跟局部过滤器

局部过滤器

// 局部过滤器
filters:{
    mySlice(value){
        return value.slice(0,4)
    },
}

局部过滤器只能被包含该过滤器的Vue实例使用，其他的Vue实例使用不到

<div id="root2">
    <h2>{{mag | mySlice}}</h2>
</div>
<script>
    const vm=new Vue({
        el:'#root',
        data:{
            msg:'你好，世界',
        },
        // 局部过滤器
        filters:{
            mySlice(value){
                return value.slice(0,4)
            },
        }
    })
    new Vue({
        el:'#root2',
        data:{
            mag:'hello wrold'
        },
    })
</script>

如果想要某个过滤器被所有的Vue实例使用，可以将过滤器设置成全局过滤器

全局过滤器

// 全局过滤器
Vue.filter('mySlice',function (value){ return value.slice(0,4)})

t6G0Kol-1680665346583)]

如果想要某个过滤器被所有的Vue实例使用，可以将过滤器设置成全局过滤器

全局过滤器

// 全局过滤器
Vue.filter('mySlice',function (value){ return value.slice(0,4)})