简单介绍一下过滤器，顾名思义，过滤就是一个数据经过了这个过滤之后出来另一样东西，可以是从中取得你想要的，或者给那个数据添加点什么装饰，那么过滤器则是过滤的工具。例如，从['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. php 微信公众平台OAuth2.0网页授权，获取用户信息代码类封装demo

    get_wx_data.php <?php /** * 获取微信用户信息 * @author: Lucky hypo */ class GetWxData{ private $appid = ' ...

  2. c#中多线程同步Lock（锁）的研究以及跨线程UI的操作 （转）

    https://www.cnblogs.com/tommyheng/p/4104552.html 本文只针对C#中,多线程同步所用到的锁(lock)作为研究对象.由于想更直观的显示结果,所以,在做de ...

  3. Python - Django - ORM 外键操作

    models.py: from django.db import models # 出版社 class Publisher(models.Model): id = models.AutoField(p ...

  4. attribute__关键字举例之visibility

    /** @file visibilityT.c * @note * @brief * @author * @date 2019-6-20 * @note v1.0.0 Created * @histo ...

  5. springboot中使用mybatis的分页插件pageHelper

    首先在pom.xml中配置 <!-- https://mvnrepository.com/artifact/org.mybatis.spring.boot/mybatis-spring-boot ...

  6. RocketMQ控制台命令

    本文未完成,有空再补充,不小心发布了,抱歉 Rocket版本:4.3.0 这几天在整RocketMQ,可谓是困难重重,其中关于控制台的命令,网上的都是一半一半的, 所以我打算直接用整一个完整的官方的命 ...

  7. simple config of webpack

    Demo1操作手册 本Demo演示进行简单配置的基本使用 准备环境 初始化环境, cd到demo目录之后, 执行如下命令: npm init -y npm install webpack webpac ...

  8. 026 Android 带不同类型条目的listview(纯文本类型的条目，图片+文字类型的条目)+读取内存空间、手机进程信息+常驻悬浮框

    1.目标效果 带不同类型条目的listview(纯文本类型的条目,图片+文字类型的条目)+常驻悬浮框 2.页面布局文件 (1)activity_process_manager.xml <?xml ...

  9. 012 Android 动画效果(补间动画) +去掉App默认自带的标题+更改应用的图标

    1.介绍 补间动画开发者只需指定动画开始,以及动画结束"关键帧", 而动画变化的"中间帧"则由系统计算并补齐! 2.去掉App的标题 (1)将AndroidMa ...

  10. 自定义注解扩展springMvc的validation注解

    文章目录 前言 自定义校验注解 使用 后记 前言 我们都知道 springMvc 的检验框架使用的是 hibernate 的 validator ,检验数据,是有那么一点小爽快: 但是,validat ...