Vue的过滤器

在ES5中,数组的filter()方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>
<script type="text/javascript">
    var arr = [1,2,3,4,5];
    var returnArr = arr.filter(function(ele,index,arr){
        if(ele%2===0){
            return true;
        }
        else{
            return false;
        }
    })
    console.log(returnArr);
</script>

过滤器注册 大致的过程可以分成两步 1.进行过滤器的注册 2.过滤器的使用,在表达式的后面添加管道符号(|)

私有过滤器 注册的时候使用filters属性,只能在当前vue组件(实例)下使用

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--引入js-->
        <script src="../node_modules/vue/dist/vue.js"></script>
    </head>

    <body>
        <div id="app">
            {{ message | toUC}}
            <br /> {{ message | toUC(message)}}
        </div>
    </body>

</html>
<script>
    var viewModel = {
        message: 'hello world!',
        message1: 'HELLO WORLD!'
    }
    //1. 私有过滤器
    var vm1 = new Vue({
        el: '#app',
        data: viewModel,
        filters: {
            toUC: function(input) {
                return input.toUpperCase()
            }
        }
    })
</script>

全局过滤器

<!DOCTYPE html>
<html>

<head>
    <title>全局过滤器</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app1">
        <!-- 写法1 -->
        <!-- {{msg1 | toLC(msg1)}} -->
        <!-- 写法2 -->
        {{msg1 | toLc}}
    </div>
    <div id="app2">
        {{msg2 | toLc}}
    </div>
</body>
<script type="text/javascript">
    Vue.filter('toLc', (input) => {
        return input.toLowerCase();
    });

    var vm1 = new Vue({
        el: "#app1",
        data: {
            msg1: "I AM GOOD MAN"
        }
    });

    var vm2 = new Vue({
        el: '#app2',
        data: {
            msg2: "YOU ARE A GOOD Girl"
        }
    })
</script>

</html>

双向过滤器 双向过滤器就是: 通过过滤器实现双向的数据过滤

<!DOCTYPE html>
<html>

<head>
    <title>私有过滤器</title>
    <!--在这里引入1.0的js文件-->
</head>

<body>
    <div id="app">
        <input type="text" v-model="price | cents" />
    </div>
</body>
<script type="text/javascript">
    Vue.filter('cents', {
        read:function(value){
            return (value/100).toFixed(2);
        },
        write:function(value){
            return value*100;
        }
    });

    var vm = new Vue({
        el: '#app',
        data: {
            price:150
        }
    })
</script>

</html>

1.0和2.0的注意事项

 1.取消了内置过滤器
  2.取消了对v-model和v-on的支持,也就是只能在{{ }}中使用
  3.在动态参数方面,不再使用空格的形式,而是适应函数的形式

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏吴裕超

大搜车知乎live中的面试题结题方法记录

1、HTML&CSS(分别10分) 1. 一个div,宽度是100px,此时设置padding是20px,添加一个什么css属性可以让div的实际宽度仍然保持在...

576110
来自专栏老马寒门IT

09-移动端开发教程-Sass入门

1. 引言 CSS3之前的CSS都大都是枚举属性样式,而编程语言强大的变量、函数、循环、分支等功能基本都不能在CSS中使用,让CSS的编程黯淡无光,Sass就是...

30460
来自专栏互联网杂技

jQuery插件编写步骤详解

本文实例讲述了jQuery插件编写步骤。分享给大家供大家参考,具体如下: 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jq...

482110
来自专栏deepcc

CSS: IE中的BUG之margin-bottom失效

279100
来自专栏LIN_ZONE

js中的异步与同步,解决由异步引起的问题

之前在项目中遇到过好多次因为异步引起的变量没有值,所以意识到了认识js中同步与异步机制的重要性

23820
来自专栏坚毅的PHP

node.js学习与应用

学习资料 入门: 小白篇 http://samsungapps.csdn.net/text.html?arcid=311044 了解了 npm,类似于pytho...

34460
来自专栏LIN_ZONE

写jquery插件(转载)

如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了。至于使用jquery好处这里就不再赘...

15030
来自专栏老马寒门IT

09-移动端开发教程-Sass入门

CSS3之前的CSS都大都是枚举属性样式,而编程语言强大的变量、函数、循环、分支等功能基本都不能在CSS中使用,让CSS的编程黯淡无光,Sass就是一种增强CS...

63990
来自专栏超然的博客

让js调试更简单—console

console上述的集中度支持printf的占位符格式,支持的占位符有:字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o):

14510
来自专栏大内老A

ASP.NET MVC的Model元数据与Model模板:预定义模板

通过ModelMetadata表示的Model元数据的一个主要的作用在于为定义在HtmlHelper和HtmlHelper<TModel>中的模板方法(这些模板...

269100

扫码关注云+社区

领取腾讯云代金券