浅谈v3过滤器的使用

1.前言

1.v3废除了过滤器
2.但是过滤器也是开发中非常常用的功能,因为大多数时候还是需要对服务器返回的数据进行进一步的整理

---

2. v3 替代方案methods

方法的返回值就是显示的内容

        
{{formatTime(time)}}

methods

 formatTime(time) {
                    //参数 时间戳转成  2021-11-10
                    let d = new Date()
                    d.setTime(time)
                   let year = d.getFullYear()
                   let month = d.getMonth() + 1
     
                    month = month.toString().padStart(2, 0)
                    let day = d.getDate()
                    day = day.toString().padStart(2, 0)

                    //时分秒 2021-12-12 12:23自己转
                    return `${year}-${month}-${day}`
                },
                

注意一定得写 return

---

3. computed方案

  
反转:{{reverseMsg}}

 reverseMsg(){
                    return this.msg.split("").reverse().join("")
                },

---

4. 回顾下 v2的过滤器用法

 
        

 
        
{{msg | getStr}}
        
        
{{"陈红军" | getData(A,B)}}

---

new Vue({
            el:"#app",
            data:{
                msg:"hello",
                count:1,
                A:"辛苦了",
                B:"致敬",
            },
            methods:{
                changeMsg(){
                    return this.msg +"改变"
                }
            },
            // 过滤器 filters 注意加 s  多个
            filters:{
                getStr(v){
                //  过滤器里面的函数方法 ,this指向window,
                // 是因为 vue中不建议 过滤器参与业务逻辑,
                // 所以过滤函数中 不能通过this访问 组件对象
                  console.log(this)
                    console.log("------v:",v)
                    v+= "你好"
                    return v
                },
                getData(name,a,b){
                    // 默认第一个参数 就是过滤器 过滤的 变量
                    console.log(a,b)
                    return name+a+b
                }
            }
        })

---

5. 总结

其实 方法和 计算属性 在v2里面也经常使用,只是因为没有去刻意的当做 过滤器来使用而已,v3只是更好的利用原有的能力

参考资料

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉