在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. day python011函数的进阶

    形参: 1.位置传参  2. 默认值传参. 3.动态传参 一   动态传参(形参的一种): 之前我们说过了了传参, 如果我们需要给⼀一个函数传参, ⽽而参数⼜又是不确定的. 或者我给⼀一个函数传很多参 ...

  2. 51Nod 1459：迷宫游戏（最短路）

    1459 迷宫游戏  基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题  收藏  关注 你来到一个迷宫前.该迷宫由若干个房间组成,每个房间都有一个得分,第一次进入这个房间, ...

  3. C++学习（十三）（C语言部分）之 练习

    打印图像 要用循环 空心或者实心都可以1.矩形 菱形 三角形 梯形 六边形2.打印倒三角形的99乘法表 具体测试代码如下: /* 1.打印图像 要用循环 空心或者实心都可以 矩形 菱形 三角形 梯形 ...

  4. 【单位矩阵】【杭电OJ1575】

    Tr A Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  5. JS 冒泡排序法 输出最大值

    <html lang="en-US"> <head> <meta charset="UTF-8"> <title> ...

  6. CS程序中XML编码Encode和解码Decode

    VB6的代码,原则上只要是Windows系统均可以使用此方法 Function XMLEncode(ByVal text As String) As String Dim xmldoc Set xml ...

  7. Linux配置浮动IP

    在高可用集群环境中,一般都需要使用浮动IP来实现web高可用(High Availability). 浮动IP的概念以及为什么需要浮动IP请参考:https://blog.csdn.net/readi ...

  8. Ubuntu安装时怎样分区

    1./swap交换分区,一般为你机器内存的两倍.少于这个容量.系统无法进入休眠. 实质是硬盘上的交换空间而非分区.所以没有格式,默认休眠将数据储存于此 能够取消(如不用swap必须再设定方可休眠)-- ...

  9. 在sorted range上的操作（includes,set_union,set_intersection,set_difference）

    includes //版本一:用operator <比较元素 template <class InputerIterator1,class InputerIterator2> boo ...

  10. 火狐浏览器firebug

    1. 近日,Firebug团队在官网贴出了停止继续开发.更新维护Firebug的通知,邀请大家使用Firefox内置工具DevTools.   来自官网截图 Firebug是Firefox旗下的一款扩 ...