zoukankan      html  css  js  c++  java
  • Vue学习之路第十七篇:全局过滤器的使用

    1、过滤器

    ①:Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:插值表达式和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号(“|”)指示。使用方式为:{{ msg | formatMsg}},其中msg为要被过滤的文本,formatMsg为过滤器名称。

    ②:过滤器的定义方式:

    Vue.filter('formatMsg',function(msg){//对data数据进行处理的方法体});

    这里定义了一个名为formatMsg的过滤器,过滤器的第一个参数为过滤器的名称;第二个参数为过滤方法,方法参数是要被过滤的文本,即管道符号前面的数据。

    2、看简单例子:
    <body>
        <div id="app">
            <p>{{ msg }}</p>
        </div>
    
        <script type="text/javascript">
    
            var vm = new Vue({
                el:"#app",
                data:{
                    msg:'曾经小小少年,有小小的梦,小小的开始,小小的进步,小小的实现'
                },
                methods:{}
            });
        </script>
    </body>

    这里只是在页面简单的展示了msg定义的数据。现在我们要使用过滤器把msg里文本为“小小”的字符串替换为“大大”。

        <div id="app">
            <p>{{ msg | formatMsg }}</p>
        </div>

    页面上调用名字为formatMsg的过滤器

     //定义过滤器
    Vue.filter('formatMsg',function(msg){
           return msg.replace(/小小/g,'大大');
    });

    这里定义了名称为formatMsg的过滤器,过滤器中调用replace方法把“小小”替换为“大大”。运行结果如下:

    3、过滤器还可以添加任意多个参数

       <div id="app">
            <p>{{ msg | formatMsg('超级','大大') }}</p>
        </div>

    这里过滤器有两个参数,那么在定义过滤器时,应该在相对应的过滤方法中展示对应的参数:

        Vue.filter('formatMsg',function(msg,arg1,arg2){
             return msg.replace(/小小/g,arg1 + arg2);
        });

    这里过滤方法中的第一个参数为需要过滤的文本,后面的参数为过滤器调用时带的参数。运行结果如下:

    每天进步一点点!

  • 相关阅读:
    大型门户网站架构设计的可伸缩性
    服务器性能的瓶颈分析
    boost中bind、thread、io_services测试
    C++ 宏定义中字符串连接操作
    完成端口与高性能服务器程序开发
    异步IO、APC、IO完成端口、线程池与高性能服务器
    在模板类中使用字符串作为无类型模板参数
    VS2010 设置全局Include Directories与Library Directories
    Yii的Model ( 模型)创建及使用
    mvc中循环遍历分配的代码
  • 原文地址:https://www.cnblogs.com/shibin90/p/10351831.html
Copyright © 2011-2022 走看看