在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. How to do distributed locking

    How to do distributed locking 怎样做可靠的分布式锁,Redlock 真的可行么? 本文是对 Martin Kleppmann 的文章 How to do distribu ...

  2. 【Wannafly挑战赛24】【C失衡天平】

    https://www.nowcoder.com/acm/contest/186/C 题意:有n个武器,每个武器都有一个重量 Wi,有一个天平,只要两端的重量差不大于m就能达到平衡,求在天平平衡的情况 ...

  3. AangularJS入门总结三

    (参考的资料) 1. 数据绑定的原理: (1)  $watch 队列: 在DOM中每次绑定一些东西,就会往$watch队列中插入一条$watch: 每一个绑定到了DOM上的数据都会生成一个$watch ...

  4. linux之nagios安装教程

    我的系统环境是centos7,其它系统应该也差不多,只是有几条命令可能需要换种写法 下面是我用到的命令 363 yum install -y gcc gcc-c++ httpd php php-gd ...

  5. 使用loki+ mtail + grafana + prometheus server分析应用问题

    loki 是一个方便的类似prometheus 的log 系统,mtail 是一个方便的日志提取工具, 可以暴露为http 服务——支持导出prometheus metrics 环境准备 docker ...

  6. SQL Server数据库有三种恢复模式：简单恢复模式、完整恢复模式和大容量日志恢复模式

    SQL Server数据库有三种恢复模式:简单恢复模式.完整恢复模式和大容量日志恢复模式: 1.Simple 简单恢复模式, Simple模式的旧称叫”Checkpoint with truncate ...

  7. PySpark理解wordcount.py

    在本文中, 我们借由深入剖析wordcount.py, 来揭开Spark内部各种概念的面纱.我们再次回顾wordcount.py代码来回答如下问题 对于大多数语言的Hello Word示例,都有mai ...

  8. Zookeeper命令行world

    world:anyone:cdrwa getAcl /imooc/abc 获得节点abc的权限 设置权限为crwa.  setAcl /nick/abc world:anyone:crwa 测试删除权 ...

  9. 大数据离线分析平台 JSSDK数据收集引擎编写

    JsSDK设计规则在js sdk中我们需要收集launch.pageview.chargeRequest和eventDuration四种数据,所以我们需要在js中写入四个方法来分别收集这些数据,另外我 ...

  10. Elasticsearch的数据导出和导入操作（elasticdump工具），以及删除指定type的数据（delete-by-query插件）

    Elasticseach目前作为查询搜索平台,的确非常实用方便.我们今天在这里要讨论的是如何做数据备份和type删除.我的ES的版本是2.4.1. ES的备份,可不像MySQL的mysqldump这么 ...