简单介绍一下过滤器，顾名思义，过滤就是一个数据经过了这个过滤之后出来另一样东西，可以是从中取得你想要的，或者给那个数据添加点什么装饰，那么过滤器则是过滤的工具。例如，从['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>

Vue-filter指令全局过滤和稀有过滤的更多相关文章

  1. Vue 全局过滤和局部过滤

    局部过滤器(放在组件里) filters: { //局部过滤器 FormattingMoney:value=>{ return value==null? '0' : value/100 } }, ...

  2. vue中自定义指令vue.direvtive，自定义过滤器vue.filter(),vue过渡transition

    自定义指令 默认设置的核心指令( v-model,v-bind,v-for,v-if,v-on等 ),Vue 也允许注册自定义指令.注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而 ...

  3. 数组filter方法对数组元素进行过滤

    Array.prototype.filter对数组中元素进行过滤 /** * @method reduce * @param {number} item 当前迭代的数组元素 * @param {num ...

  4. automapper如何全局配置map条件过滤null值空值对所有映射起效

    原文 automapper如何全局配置map条件过滤null值空值对所有映射起效 我们在使用automapper的时候经常会遇到这样的问题:假设展示给用户的数据我们用UserDto类,User类就是我 ...

  5. 机器学习实战基础（十五）：sklearn中的数据预处理和特征工程（八）特征选择 之 Filter过滤法（二） 相关性过滤

    相关性过滤 方差挑选完毕之后,我们就要考虑下一个问题:相关性了. 我们希望选出与标签相关且有意义的特征,因为这样的特征能够为我们提供大量信息.如果特征与标签无关,那只会白白浪费我们的计算内存,可能还会 ...

  6. Vue | 自定义指令和动态路由实现权限控制

    功能概述: 根据后端返回接口,实现路由动态显示 实现按钮(HTML元素)级别权限控制 涉及知识点: 路由守卫 Vuex使用 Vue自定义指令 导航守卫 前端工程采用Github开源项目Vue-elem ...

  7. VUE笔记 - 过滤器 Vue.filter 形参默认值 @keyup.f2 自定义按键修饰符

    过滤器函数的传参: 第一个参数 A 是固定的,表示要过滤之前的内容. 第二个参数 B,表示要把原本的内容 A 过滤成 B. 写函数内容时, 这里第二处只写个参数. 实际的值要写到管道符调用函数的括号内 ...

  8. 解读vue filter

    1.全局filter, 全局的过滤一般在main.js里面使用 <div id="app"> <div> {{testVal | filVal(10,30) ...

  9. Vue filter介绍及详细使用

    Vue filter介绍及其使用 VueJs 提供了强大的过滤器API,能够对数据进行各种过滤处理,返回需要的结果. Vue.js自带了一些默认过滤器例如: capitalize 首字母大写 uppe ...

随机推荐

  1. Spring cloud微服务安全实战-6-7jwt改造总结

    限流的改造. 同样注意,不要声明成Spring的Bean 在上面声明Rateliiter 如果能获取到权限继续往下走,没权限就返回,to many request的错误信息. 加到过滤器链上 加载Sp ...

  2. 增强篇1 PO保存增强

    公众号文章地址:https://mp.weixin.qq.com/s?__biz=Mzg4MzI1OTM0OA==&mid=2247484108&idx=7&sn=90e561 ...

  3. 【ARTS】01_42_左耳听风-201900826~201900901

    ARTS: Algrothm: leetcode算法题目 Review: 阅读并且点评一篇英文技术文章 Tip/Techni: 学习一个技术技巧 Share: 分享一篇有观点和思考的技术文章 Algo ...

  4. 实验1 C 语言开发环境使用和数据类型、运算符、表达式

    # include <stdio.h> int main() { int x; printf("x:\n"); scanf("%d",&x) ...

  5. puppeteer-firefox 开启扩展

    puppeteer-firefox安装扩展 puppeteer-firefox 目前已经有许多人在投入开发工作,但是和chrome的launch打开扩展api不一致,在chrome中,我们可以很容易配 ...

  6. 推荐Pi(π)币，相当于比特币手机挖矿版

    我为什么推荐这个? 说实话,之所以发出来还是因为如果用我的邀请码注册,双方的挖矿速度都会增加些,我的邀请码:leneing,有问题可以咨询我. Pi币简介 1.在这里强烈推荐Pi币,相当于比特币手机挖 ...

  7. 同时使用Redis缓存和Google Guava本地缓存注意事项（深拷贝和浅拷贝）

    目录 1.问题场景及说明 2.Redis 缓存是深拷贝 3.Guava本地缓存直接获取则是浅拷贝 4.如何实现Guava获取本地缓存是深拷贝? 1.问题场景及说明 系统中同时使用 Redis 缓存和 ...

  8. Django学习过程中遇到的问题

    一.Django数据同步过程中遇到的问题: 1.raise ImproperlyConfigured('mysqlclient 1.3.13 or newer is required; you hav ...

  9. Debian10.1用wine打开Windows工具乱码总结

    由于之前的deepin15.11莫名其妙挂了(就是使用一般没做啥特殊操作就挂了,不过有可能是我的移动固态硬盘也有锅),所以这次决定装Debian10.1版本, 由于安装时选择语言环境是中文的话创建的一 ...

  10. http拦截器-HandlerInterceptor

    简介 拦截器我想大家都并不陌生,最常用的登录拦截.权限校验.防重复提交.记录日志等等,总之可以去做很多的事情. 自定义拦截器HandlerInterceptorAdapter 我们以记录日志为例,介绍 ...