• Vue-filter指令全局过滤和稀有过滤


    简单介绍一下过滤器,顾名思义,过滤就是一个数据经过了这个过滤之后出来另一样东西,可以是从中取得你想要的,或者给那个数据添加点什么装饰,那么过滤器则是过滤的工具。例如,从['abc','abd','ade']数组中取得包含‘ab’的值,那么可通过过滤器筛选出来‘abc’和‘abd’;把‘Hello’变成‘Hello World’,那么可用过滤器给值‘Hello’后面添加上‘ World’;或者把时间节点改为时间戳等等都可以使用过滤器。

    全局过滤器:

    Vue.filter('globalFilter', function (value) {

      return value + "!!!"

    })

    <body>
        <div  class="box">
            <!-- | 代表管道,过滤器语法  后面msopt是过滤器的名字 -->
            <p>{{ ms | msopt('疯狂')}}</p>
        </div>
     
    
    <script>
    
    
        // 标准函数
            // var a=function (args){
                // alert("hello word");
            // };
            // 箭头函数
            // var a=()=>{
            //     alert("hello word");
            // };
    
    
    // 全局过滤 filter  第一个参数是必须的,第一个参数就是{{ms |msopt}}"|"前面的
    // 定义一个全局的过滤器 filter名字叫做msopt
    //这里面回调函数 function(){return dd.replace()} 简写成了箭头函数
    // 而且  <p>{{ ms | msopt('疯狂'')}}</p> 我们需要自己来出传递这个参数
    // 我们知道filter 里面的回调函数 第一个参数是写死的,我们只能用第二个
        Vue.filter('msopt', (dd,arg)=>{
            return dd.replace('/单纯/g',arg);
            // /单纯/g  正则表达式 g 是全局搜索
        })
    
        var vm=new Vue({
            el:'.box',
            data:{
                ms:'单纯的我,就喜欢单纯的问问,你单纯吗?'
            },
           methods: {
               
           },
        })
    </script>

     

     私有过滤器(filters)

     <tbody>
            <tr>
                <td>{{ jj | appmeg("不上班") }}</td>
            </tr>
        </tbody>
    </table>
    
        
        
    <script>
        
    var vm=new Vue({
        el:'.table',
        data:{
            jj:'今天星期六'
    
        },
        methods:{
    
        },
        //定义自定义(私有)的过滤器
        // filters:{
        //     // appmeg 私有过滤器的名字  a  是必须参数 代表要过滤的字符串
        //      如果存在私有和全局过滤器,采用就近原则先用私有的过滤器
        //     appmeg:function(a){
        //         return a+'sdfsdfsdf';
    
        //     }
    
        // }
        
    
            // 带有参数的自定义filter
        filters:{
            // appmeg 私有过滤器的名字  a  是必须参数 代表要过滤的字符串
            appmeg:function(a,b){
                return a+'sdfsdfsdf'+b;
    
            }
    
        }
        
        
    });
    </script>
  • 相关阅读:
    携程机票实时数据处理实践及应用
    关系型数据库表设计
    tornado
    Poisson distribution 泊松分布 指数分布
    Interpret bytes as packed binary data
    python爬虫爬取内容中,-xa0,-u3000的含义
    Okapi BM25 (BM stands for Best Matching)
    一主
    分片 副本
    暂时无法提交申请 帐号类型修改
  • 原文地址:https://www.cnblogs.com/xiaowie/p/11584894.html
Copyright © 2020-2023  润新知