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

    在代码里,我们没有认证或者授权的filter.认证和授权的工作现在基本上完全由Spring Security的过滤器接管了. 本节就来看下 如何在Spring Security的过滤器链上加入我们自己 ...

  2. Swift编码总结2

    1.swift如何隐藏在 iPad 上的 quicktype 键盘工具栏? let item = textField.inputAssistantItem item.leadingBarButtonG ...

  3. Win10下载安装PostgreSQL 11.1

    下载地址:https://get.enterprisedb.com/postgresql/postgresql-11.1-1-windows-x64.exe Installation Director ...

  4. Java以UTF-8格式读写及追加写文件示例

    package test; import java.io.BufferedReader; import java.io.File; import java.io.FileInputStream; im ...

  5. 【Leetcode_easy】884. Uncommon Words from Two Sentences

    problem 884. Uncommon Words from Two Sentences 题意:只要在两个句子中单词出现总次数大于1次即可. 注意掌握istringstream/map/set的使 ...

  6. python 爬虫实例（二）

    环境: OS:Window10 python:3.7 描述 打开下面的网址,之后抓取其中的图片 https://music.163.com/#/artist/album?id=101988&l ...

  7. go方法

    go中的方法(method),跟函数(function)不是一个概念,一定要区分,它的概念与python中的类方法类似. go中是没有类的概念的,所以,go要想实现类 多种属性集合的功能的话,必须要使 ...

  8. 多生产者多消费者（第一种方式），基于synchronized,wait,notifyAll

    生产者消费者模式描述的是协调与协作关系.比如一个人正在准备食物(生产者),而另一个人正在吃(消费者),他们使用一个共用 的桌子用于放置盘子和取走盘子,生产者准备食物,如果桌子上已经满了就等待,消费者( ...

  9. 【转帖】如果进入CPU的世界，时间会是怎样的？

    如果进入CPU的世界,时间会是怎样的? 2018-02-26 20:52:46 world6 阅读数 1295更多 分类专栏: 网络 缓存服务 架构   版权声明:本文为博主原创文章,遵循CC 4.0 ...

  10. Java中XML的四种解析方式（二）

    三.JDOM解析 特征: 1.仅使用具体类,而不使用接口. 2.API大量使用了Collections类. import org.jdom2.Attribute; import org.jdom2.D ...