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

    当一张表的某一些字段查询的比较频繁,另外一些字段查询的不是特别频繁,可以把不怎么常用的字段 单独拿出来做成一张表,然后用一对一的表关联起来 这样既保证数据都完整的保存下来,又能保证检索更快 model ...

  2. idea能用下划线替换红色报错吗？我色弱，用idea简直太痛苦了

    看看下图的idea,如果某个类的包路径没有引进来,使用颜色来提示,这对于色弱的程序员简直是一种折磨,有没有可以改成eclipse的那种报错提示方式? 个人感觉idea真的没有eclipse友好,也许是 ...

  3. C#多线程编程实例 线程与窗体交互

    C#多线程编程实例 线程与窗体交互 代码: public partial class Form1 : Form { //声明线程数组 Thread[] workThreads = ]; public ...

  4. 【Leetcode_easy】953. Verifying an Alien Dictionary

    problem 953. Verifying an Alien Dictionary solution: class Solution { public: bool isAlienSorted(vec ...

  5. Vue + ElementUI的电商管理系统实例03 用户列表

    1.通过路由展示用户列表页 新建user文件夹,里面新建Users.vue文件: <template> <div> <h3>用户列表组件</h3> &l ...

  6. RabbitMQ官方教程二 Work Queues(GOLANG语言实现)

    RabbitMQ官方教程二 Work Queues(GOLANG语言实现) 在第一个教程中,我们编写了程序来发送和接收来自命名队列的消息. 在这一部分中,我们将创建一个工作队列,该队列将用于在多个wo ...

  7. 【机器学习】attention机制

    参考: 1.https://lilianweng.github.io/lil-log/2018/06/24/attention-attention.html

  8. 哈希--Hash，“散列”/“哈希”

    哈希 Hash,翻译“散列”,音译为“哈希”,把任意长度的输入,通过散列算法,变换成固定长度的输出,该输出就是散列值.这种转换是一种压缩映射,也就是散列值的空间通常远小于输入的空间,不同的输入可能会散 ...

  9. 用Gson实现json与对象、list集合之间的相互转化

    先写一个Person实体类,导入Gson包 String jsonData="{\"userid\":\"1881140130\"}";// ...

  10. 关于使用 symfony 3.4.32中Luckynumber 页面的 route 书写

    关于symfony 3.4.32的安装与配置及第一个页面Luckynumber 的route书写 1.symfony 的安装与配置 symfony官网文档:https://symfony.com/do ...