在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. PHP5和PHP7的安装、PHP和apache的整合！

    1.PHP5的安装: 下载: wget -c http://cn2.php.net/distributions/php-5.6.36.tar.gz  (php5) wget -c http://cn2 ...

  2. PDO数据库引擎

    PDO概述1.PDO是一种数据库访问抽象层,你不必使用以前的 mysqli_xx 之类只能访问 mysql数据库.使用PDO可以连接mysql.msssql.oracle等等,而不必重写代码.2.PD ...

  3. ubuntu软件管理

    https://www.cnblogs.com/forward/archive/2012/01/10/2318483.html 一.Ubuntu中软件安装方法1.APT方式(联网安装, 需要联网下载软 ...

  4. Linux中查看显卡硬件信息

    Linux中查看显卡硬件信息 https://ywnz.com/linuxjc/67.html lspci -vnn | grep VGA -A 12lshw -C display 查看当前使用的显卡 ...

  5. centos Cannot allocate memory for the buffer pool

    mysql 无法启动 ,查看日志: --01T15::.401599Z [Warning] TIMESTAMP with implicit DEFAULT value is deprecated. P ...

  6. bash常识

    文章目录 比较是否相等 = 字符串操作 字符串变量的截取操作 字符串替换 字符串比较 取长度 查找子串的位置 选取子串 fork, exec, source fork exec source 补充 其 ...

  7. debezium mongodb 集成测试

    debezium 是一个方便的cdc connector 可以帮助我们解决好多数据实时变更处理.数据分析.微服务的数据通信 从上次跑简单demo到现在,这个工具是有好多的变更,添加了好多方便的功能,支 ...

  8. 递归和非递归分别实现strlen

    思路:strlren主要是字符串是以'\0'为结尾标识来计算字符串的长度,所以要实现自己去写strlen也要从这方面下手. 非递归思想:应用循环的思路,以'\0'为循环结束的标识,每循环一次计数加一. ...

  9. python从文本中提取某酒店机顶盒号和智能卡号

    1.某项目中经常遇到需要关闭一些机顶盒消费权限.但是给过来的不是纯字符串,需要自己提取. 有400多个机顶盒和智能卡.nodepad++的列块模式也可以提取,但是还是稍微麻烦,因为列不对等 先复制到文 ...

  10. 一个小工具 TcpTextListener

    项目地址 :    https://github.com/kelin-xycs/TcpTextListener 这是一个 可以 监听 Tcp (Http) 传输数据 的 小工具 . 不是 抓包 .不要 ...