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

    将PCM格式存储成WAV格式文件 WAV比PCM多44个字节(在文件头位置多) 摘自:https://blog.csdn.net/u012173922/article/details/78849076 ...

  2. 改进初学者的PID-修改整定参数

    最近看到了Brett Beauregard发表的有关PID的系列文章,感觉对于理解PID算法很有帮助,于是将系列文章翻译过来!在自我提高的过程中,也希望对同道中人有所帮助.作者Brett Beaure ...

  3. JSON 多层对象获取键值

    <html> <script> window.onload = function(){ var json = { "options":{ "nam ...

  4. 【opencv】opencv函数isContinuous

    isContinuous 参考 1. opencv_isContinuous; 完

  5. 获取两日期之前集合并转为String类型的集合

    /** * 获取两个日期之间的日期 * * @param start 开始日期 * @param end 结束日期 * @return 日期集合 */ private static List<D ...

  6. jvm(1)---java内存结构

    jvm主要由三个子系统构成:类加载子系统,运行时数据区,执行引擎 运行时数据区主要包括: 1.本地方法栈:登记native方法,执行时加载本地方法库 2.程序计数器:就是一个指针,用来存储指向下一条执 ...

  7. python解析本地HTML文件

    Python使用爬虫技术时,每运行一次,本地都会访问一次主机.为避免完成程序前调试时多次访问主机增加主机负荷,我们可以在编写程序前将网页源代码存在本地,调试时访问本地文件即可.现在我来分享一下爬取资料 ...

  8. linux中信号的API详解实例

    /************************************************************************* > File Name: signal.c ...

  9. 方法重载overload与方法重写overwrite

    方法重载overload: 在同一个类中,出现相同的方法名,与返回值无关,参数列表不同:1参数的个数不同 2参数类型不同 在调用方法时,java虚拟机会通过参数列表来区分不同同名的方法 方法重写ove ...

  10. DateTimeFormatter 的操作与使用 -- 通俗易懂

    在上一章我们讲解了LocalDate.LocalTime.LocalDateTime.Instant的操作与使用,下面讲解它们之间是如何进行格式化 DateTimeFormatter这个类它只提供了时 ...