在vue2.0以前的版本中vue内置的过滤器，但是因为缺乏纯JavaScript的灵活性，现在vue2.0版本中已经删除了内置过滤器，所以需要自己注册过滤器，我们可以定义本地（在某一个template里面定义filter）过滤器，或者定义全局（global）过滤器。需要提醒的是，如果你定义了一个全局过滤器，它必须在Vue实列之前定义，以上两种方式，我们将传递value作为参数。

全局过滤器

下面定义一个全局过滤器，用于在数据前加上大写的VUE。需要注意的是，过滤器定义必须始终位于Vue实例之上，否则会报错。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue</title>

    <style>

    </style>

    <script src="./vue.js"></script>

</head>

<body>

    <div id="demo">{{message | toAdd}}</div>

    <script>

        Vue.filter("toAdd",function(value){

            return 'VUE' + value

        })

        var demo = new Vue({

            el: '#demo',

            data: {

            message: '过滤器',

            }

        })

    </script>

</body>

</html>

本地过滤器

本地过滤器存储在vue组件中，作为filters属性中的函数，我们可以注册多个过滤器存储在其中。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue</title>

    <style>

    </style>

    <script src="./vue.js"></script>

</head>

<body>

    <div id="demo">

        <p>{{message | Reverse}}</p>

        <p>{{message | Length}}</p>

    </div>

    <script>

        var demo = new Vue({

            el: '#demo',

            data: {

                message: '过滤器',

            },

             filters: {

                Reverse: function (value) {

                    if (!value) return ''

                    value = value.toString()

                    return value.split('').reverse().join('')

                },

                Length: function(value){

                    return value.length

                } ,

            },

        })

    </script>

</body>

</html>

串联过滤器

过滤器除了单独使用之外，我们还可以对过滤器进行串联使用，也可以在v-bind中使用过滤器。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue</title>

    <style>

        .color{

            color:red;

        }

    </style>

    <script src="./vue.js"></script>

</head>

<body>

    <div id="demo">

        <p>{{message | Reverse | Length}}</p>

        <div :class="raw | format">在v-bind表达式中使用过滤器</div>

    </div>

    <script>

        var demo = new Vue({

            el: '#demo',

            data: {

                message: '过滤器',

                raw:'roloc'

            },

             filters: {

                Reverse: function (value) {

                    if (!value) return ''

                    value = value.toString()

                    return value.split('').reverse().join('')

                },

                Length: function(value){

                    return value+value.length

                } ,

                format:function(value){

            return value.split('').reverse().join('')

          }

            },

        })

    </script>

</body>

</html>

过滤器传参

在vue1.0中，我们向过滤器传递参数时，直接用引号引起来放在过滤器后面就可以了，但是在vue2.0中，需要将参数全部放在括号里面后再接在过滤器后面。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue</title>

    <script src="vue.js"></script>

</head>

<body>

     <div id="box">

        {{msg1 | toDou('12','5')}}

        {{msg2 | toDou('12','5')}}

    </div>

    <script>

        Vue.filter('toDou',function(n,a,b){

            if(n<10){

                return n+a;

            }else{

                return n+b;

            }

        });

        new Vue({

            el:'#box',

            data:{

                msg1:9,

                msg2:12,

            }

        });

    </script>

</body>

</html>

双向过滤器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue</title>

    <style>

    </style>

    <script src="vue.js"></script>

</head>

<body>

    <div id="box">

        <input type="text" v-model="msg | filterHtml">

        <br>

        {{msg}}

    </div>

     <script>

        Vue.filter('filterHtml',{

            read:function(input){ //model-view

                return input.replace(/<[^<]+>/g,'');

            },

            write:function(val){ //view -> model

                return val;

            }

        });

        var vm=new Vue({

            data:{

                msg:'<strong>welcome</strong>'

            }

        }).$mount('#box');

    </script>

</body>

</html>

vue之过滤器的更多相关文章

  1. Vue自定义过滤器

    gitHub地址: https://github.com/lily1010/vue_learn/tree/master/lesson05 一 自定义过滤器(注册在Vue全局) 注意事项: (1)全局方 ...

  2. vue filter过滤器简单应用

    vue中过滤器,用于一些常见的文本格式化,用 | 来操作. 过滤器可以用在两个地方: 1.在{{}}双花括号中插入值 2.v-bind表达式中使用 <!-- 在双花括号中 --> {{ m ...

  3. vue filters过滤器

    vue filters过滤器 vue.js允许我们自定义过滤器,可被使用于一些常见的文本格式化,过滤器可以用在两个地方,双花括号插值和 v-bind表达式.最常见的就是双花括号插值. 比如如下代码:{ ...

  4. vue的过滤器

    Vue.Js 提供了强大的过滤器API,能够对数据进行各种过滤处理,返回需要的结果 vue的过滤器一般在JavaScript 表达式的尾部,由“|”符号指示: 过滤器可以让我们的代码更加优美,一般可以 ...

  5. vue自定义过滤器的创建和使用

    1.简单介绍   过滤器的作用:实现数据的筛选.过滤.格式化.   过滤器的本质是一个有参数,有返回值的方法.   过滤器可以用在两个地方:双花括号插值和v-bind表达式(后者从2.1.0+开始支持 ...

  6. VUE：过滤器及日期格式化moment库

    VUE:过滤器及日期格式化moment库 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  7. VUE笔记 - 过滤器 Vue.filter 形参默认值 @keyup.f2 自定义按键修饰符

    过滤器函数的传参: 第一个参数 A 是固定的,表示要过滤之前的内容. 第二个参数 B,表示要把原本的内容 A 过滤成 B. 写函数内容时, 这里第二处只写个参数. 实际的值要写到管道符调用函数的括号内 ...

  8. 六、vue基础--过滤器定义

    七.过滤器定义 1.使用:{{username|strip}}.<a :href="url|strip">百度</a> 2.定义:都是定义一个函数,这个函数 ...

  9. vue 时间过滤器

    过滤器:定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理).语法:1.注册过滤器: Vue.filter(name ,callback)或new Vue{filters:{}}2. ...

  10. vue（4）—— vue的过滤器，监听属性，生命周期函数，获取DOM元素

    过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...

随机推荐

  1. .net core 微服务架构-docker的部署-包括网关服务(Ocelot)+认证服务(IdentityServer4)+应用服务（asp.net core web api）

    本文主要介绍通过Docker来部署通过.Net Core开发的微服务架构,部署的微服务主要包括统一网关(使用Ocelot开发).统一认证(IdentityServer4).应用服务(asp.net c ...

  2. PostgreSQL的目录结构及修改数据目录

    initdb 的时候会指定一个 PGDATA 目录,这就是 PostgresQL 存储数据的地方,比如:/var/lib/pgsql/10/data.======显示数据目录1. 进入psqlsudo ...

  3. HDU1272小希的迷宫–并查集

    上次Gardon的迷宫城堡小希玩了很久(见Problem B),现在她也想设计一个迷宫让Gardon来走.但是她设计迷宫的思路不一样,首先她认为所有的通道都应该是双向连通的,就是说如果有一个通道连通了 ...

  4. 【NOI2014】【BZOJ3669】【UOJ#3】魔法森林

    我学会lct辣 原题: 为了得到书法大家的真传,小E同学下定决心去拜访住在魔法森林中的隐士.魔法森林可以被看成一个包含个N节点M条边的无向图,节点标号为 1…n1…n,边标号为1…m1…m.初始时小E ...

  5. Singer 学习五 docker 运行说明

    介绍过一个工具knots ,方便Singer 可视化开发的工具,但是默认这个工具包含的tap 以及target 比较少(可以自己扩展) 同时这个工具就是基于docker 运行的 docker 运行的几 ...

  6. Wireshark常用过滤使用方法

    过滤源ip.目的ip. 在wireshark的过滤规则框Filter中输入过滤条件.如查找目的地址为192.168.101.8的包,ip.dst==192.168.101.8:查找源地址为ip.src ...

  7. 我发起了一个 .Net 平台上的 直播平台 开源项目 BalaBala

    直播平台, 需要解决的 技术点 是 2 个: 1  直播数据 的 传输 和 在 客户端 的 播放 2  大并发 关于 网络通信, 数据传输, 可以参考 <利用 MessageRPC 和 Shar ...

  8. 查看加密的vba代码

    查看加密的vba代码,可以使用这个工具,excel文件里面的宏代码一览无余. https://files.cnblogs.com/files/laoxia/PVP.zip

  9. Hadoop数据分析实例：P2P借款人信用风险实时监控模型设计

    Hadoop数据分析实例:P2P借款人信用风险实时监控模型设计 一提到hadoop相信熟悉IT领域或者经常关注互联网新闻的朋友都应该很熟悉了,当然,这种熟悉可能也只是听着名字耳熟,但并不知道它具体是什 ...

  10. Action<T> Delegate

    来源:https://docs.microsoft.com/zh-cn/dotnet/api/system.action-1?view=netframework-4.7.2 Action<T&g ...