filter过滤器

170 阅读1分钟

Vue中局部过滤器filters和全局过滤器filter

什么是过滤器:

什么是过滤器 Filter 过滤器它是 JavaWeb 的三大组件之一。三大组件分别是Servlet 程序、Listener 监听器、Filter 过滤器。 Filter 过滤器它是 JavaEE 的规范,也就是一个接口。 Filter 过滤器它的作用是拦截请求和过滤响应。拦截请求常见的应用场景有权限检查、日记操作、事务管理等等。

过滤器的定义:

对要显示的数据进行特定的格式化后再显示(适用于一些简单的逻辑处理)

全局过滤器

image.png

局部过滤

局部过滤器与全局的过滤器定义和使用方法一样。唯一的区别在于局部过滤器是定义在vue的实例中。其作用的区域也是vue实例对象内,超出即不可用。 image.png

过滤器的参数

{{time | timeFormater()}}
解析:time 作为参数 传递给 timeFormater()

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过滤器</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>{{msg | feiltr| feiltr2 }} </h2>
      
    </div>
    <script>
        //消除生产提示
        Vue.config.productionTip = false;
        //全局过滤
       Vue.filter("feiltr",function(text){
           return text.replace("甲","丙")
       })
        
       var vm = new Vue({
            el:"#root",
            data:{
                msg:"甲乙",
            },
            methods:{
              
            },
            filters:{
                feiltr2(msg){
                    return  msg.replace("乙","丁");
                }

            }
          
        })
    

    </script>
</body>
</html>