浅谈v3过滤器的使用

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

1.前言


1.v3废除了过滤器

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


2. v3 替代方案methods


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


<p>{{formatTime(time)}}</p>

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

  1. computed方案


<h1>反转:{{reverseMsg}}</h1>


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



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



<!--  函数返回值  -->
        <p v-text="changeMsg()"></p>
 <!--  filter  过滤器  默认要过滤的数据就是第一个参数-->
        <p>{{msg | getStr}}</p>
        <!-- 如果有多个参数 在过滤器方法后面传入第二个及以上参数 -->
        <p>{{"陈红军" | getData(A,B)}}</p>



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只是更好的利用原有的能力




相关文章
|
4月前
|
Java API 容器
Filter 过滤器实现
JavaWeb 组件 Servlet 提供了 Filter 过滤功能,其功能是对目标资源的请求和响应进行拦截,对拦截到的请求和响应做出特殊的功能处理,比如我们请求中有一些敏感信息过滤就是利用过滤器过滤。
|
6月前
|
Java 容器
28JavaWeb基础 - 过滤器
28JavaWeb基础 - 过滤器
25 0
|
1月前
|
Python
过滤器
过滤器
9 2
|
3月前
过滤器&拦截器
过滤器&拦截器
32 0
过滤器&拦截器
|
8月前
|
应用服务中间件
15-Filter 过滤器2
15-Filter 过滤器2
55 0
|
8月前
|
Java
15-Filter 过滤器1
15-Filter 过滤器1
64 0
|
10月前
|
监控 Java 数据库连接
过滤器的应用
在上一篇博客中,我们简单的学习了一下面向切面编程,而过滤器就是对这一思想的应用。那如何在项目中使用呢?
|
11月前
|
API 数据安全/隐私保护 容器
Filter(过滤器)
Filter(过滤器)
|
Java 应用服务中间件 API
过滤器和拦截器
过滤器和拦截器
140 0
|
API 容器
Filter过滤器的简单介绍与使用
Filter过滤器的简单介绍与使用
126 0
Filter过滤器的简单介绍与使用