zoukankan      html  css  js  c++  java
  • vue filter 过滤器使用

    vue 自定义过滤器分为"全局过滤器"和"局部过滤器"两种。

    一、 全局过滤器

    1. 全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面 ,否则不能被解析导致无法使用。
    2. 过滤器表达式:过滤的内容 | 过滤器方法名
    3. 过滤器方法中,可以设置过滤器参数,过滤的内容 | 过滤器方法名(参数1,参数2…)
     	<div id="app">
            <p>{{msg|msgFormat('疯狂','你','不是')}}</p>
        </div>
        <script>
            Vue.filter('msgFormat',function(msg,arg,arg2){
                return msg.replace(/单纯/g,arg).replace(/我/g,arg2)
            });
            var vm=new Vue({
                el:'#app',
                data:{
                    msg:'曾经,我也是一个单纯的少年,单纯的我,傻傻的问,谁是世界上最单纯的男人'
                },
                methods:{},            
            });      
        </script>
    

    在这里插入图片描述
    二、 局部过滤器

    1. 局部过滤器需要在vue的示例中构建,且一个示例可有多个局部过滤器,因此使用filters,而全部过滤器只有一个,使用filter
    2. 当全局和局部过滤器都存在时,真正作用的是局部过滤器,可以认为就近原则
    	<div id="app">
            <p>{{msg|msgFormat('疯狂','你','不是')}}</p>
        </div>
        <script>
            var vm=new Vue({
                el:'#app',
                data:{
                    msg:'曾经,我也是一个单纯的少年,单纯的我,傻傻的问,谁是世界上最单纯的男人'
                },
                methods:{},
                filters:{               
                    msgFormat:function(msg,arg,arg2){
                        return msg.replace(/单纯/g,arg).replace(/我/g,arg2);
                    }
                }
            });      
        </script>
    
  • 相关阅读:
    Android进程启动
    Android 系统Framework
    每日一问 AIDL
    Android性能优化
    Android启动优化
    Android绘制优化
    Android布局优化三剑客#
    android性能优化全方面解析(一)
    Android网络
    Android四大组件
  • 原文地址:https://www.cnblogs.com/wangqilong/p/12540365.html
Copyright © 2011-2022 走看看