在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框架平台下RPC框架选型

    net RPC框架选型 近期开始研究分布式架构,会涉及到一个最核心的组件:RPC(Remote Procedure Call Protocol).这个东西的稳定性与性能,直接决定了分布式架构系统的好坏 ...

  2. mysql优化查询

    使用索引查询 MariaDB [test]> explain select * from te where id=22; #在没有增加索引情况下,rows为7,即查询行数 +------+--- ...

  3. 【LAYABOX】轴心点和锚点

    https://blog.csdn.net/RuoYeKnight/article/details/77947288 轴心点和锚点是一个概念,都是基准点,决定了图片在舞台的位置, 简单地说,若对spr ...

  4. dev 域名与 Chrome

    前几天在相开发时使用什么的样域名比较好呢? 之前使用到 localhost,但只是本地开发,使用 test.com 感觉又不专业. 后来发现了一些指向 127.0.0.1 的域名,比如 localte ...

  5. python之路---03 整型 bool 字符串 for循环

    十三.整型(int) 基本操作: 1.+ - * / % // ** 2.  .bit_length() 计算整数在内存中占⽤的⼆进制码的⻓度 如: 十四.布尔值(bool) True  False ...

  6. 持续集成--Jenkins--1

    持续集成之Jenkins安装部署   1.安装JDK Jenkins是Java编写的,所以需要先安装JDK,这里采用yum安装,如果对版本有需求,可以直接在Oracle官网下载JDK. [root@l ...

  7. [转]从OSI网络模型到TCP/IP协议族简介

    OSI七层模型 OSI(Open System Interconnection,开放系统互联)七层网络模型成为开放式系统互联参考模型,是一个把网络通信在逻辑上的定义,也可以理解成为定义了通用的网络通信 ...

  8. Jmeter录制脚本过程及Could not create script recorder报错、您的连接不是私密连接报错

    转载自    https://www.cnblogs.com/wwho/p/7173172.html Jmeter录制脚本过程及Could not create script recorder报错.您 ...

  9. 配置Hanlp自然语言处理进阶

    中文分词 中文分词中有众多分词工具,如结巴.hanlp.盘古分词器.庖丁解牛分词等:其中庖丁解牛分词仅仅支持java,分词是HanLP最基础的功能,HanLP实现了许多种分词算法,每个分词器都支持特定 ...

  10. thinkPHP 3.2.3操作MongoDB指南

    今天使用thinkPHP操作MongoDB发现跟用MYSQL有很多不同的地方,在这里特别跟大家分享下. 暂时没用thinkPHP5一直还在用thinkPHP3.2.3觉得挺好用,MongoDB版本2和 ...