一、在methods中使用过滤器------全局定义的过滤器

  

//main.js中

import Vue from 'vue'
Vue.filter('testFilter1',function(val){
console.log("全局过滤器",val);
}) //demo.js
methods:{
getGlobal(){
//使用Vue.Filter()方式获取全局过滤器
var te = Vue.filter('testFilter1');
//调用全局过滤器
te('需要过滤的东东');
}
}

二、在methods中使用过滤器------在组件中定义的过滤器 

filters:{
testFilter2(val){
console.log('本地过滤器',val);
}
},
methods:{
getLocal(){
//使用this.$options.filters[]方式获取本地过滤器
var te = this.$options.filters['testFilter2'];
//调用本地过滤器
te('需要过滤的东东');
}
}

三、在页面中使用过滤器

{{ ‘需要过滤的东东’ | testFilter2()}}

如果需要参数

{{ ‘需要过滤的东东’ | testFilter2(参数1,参数2)}}

【vue】过滤器的使用的更多相关文章

  1. Vue 过滤器的使用

    Vue官方文档是这样说的:Vue过滤器用于格式化一些常见的文本. 在实际项目中的使用: 定义过滤器 在src定义一个filter.js文件,里面定义过滤器函数,在最后要使用 exprot defaul ...

  2. vue 过滤器filters的使用以及常见报错小坑(Failed to resolve filter)

    今天使用vue 过滤器中发现一个小坑,网上查到的大都是不正确的解决方法,故分享给大家: 原错误代码: // 过滤器 filter:{ FdishList:function(value){ if (!v ...

  3. vue过滤器微信小程序过滤器和百度智能小程序过滤器

    因为最近写了微信小程序和百度小程序,用到了过滤器,感觉还挺好用的,所以就来总结一下,希望能帮到你们. 1. 微信小程序过滤器: 1.1:首先建一个单独的wxs后缀的文件,一般放在utils文件夹里面. ...

  4. 换个角度使用VUE过滤器

    换个角度使用VUE过滤器 过滤器在Vue中的主要用于文本格式化,如小写转大小,日期格式化等操作.官方对这个功能介绍也很简单,不过确实很简单,就一个函数而已.但最近在做两款APP时,遇到一些特殊的需求. ...

  5. 3.Vue过滤器

    1.概念: Vue.js 允许你自定义过滤器,可被用作一些常见文本的格式化,过滤器可以用在两个地方:mustache 插值和 v-bind 表达式.过滤器应该被添加在 JavaScript 表达式的尾 ...

  6. 黑马vue---31-32、vue过滤器实例

    黑马vue---31-32.vue过滤器实例 一.总结 一句话总结: vue内部的东西,无论是过滤器还是组件,都是键值对的方式 1.过滤器的定义语法? Vue.filter('过滤器的名称', fun ...

  7. 带你掌握Vue过滤器filters及时间戳转换

    摘要:Vue的filters过滤器是比较常见的一个知识点,下面我将结合时间戳转换的例子带你快速了解filters的用法. 本文分享自华为云社区<三分钟掌握Vue过滤器filters及时间戳转换& ...

  8. Vue - 过滤器

    1.内部过滤器 1):字母操作: ---- 针对字符串 A:capitalize B:uppercase C:lowercase 2):json过ingfy滤器,可将表达式的值转化为Json字符串,本 ...

  9. Vue 过滤器与计算属性

    过滤器 V1.x 版本 过滤器基础 过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,可以参考官方文档,http://cn.vuejs.org/ ...

  10. 第六节:Vue过滤器的用法和自定义过滤器

    1.过滤器的用法,用  '|' 分割表达式和过滤器. 例如:{{ msg |  filter}}     {{msg | filter(a)}}  a就标识filter的一个参数. 用两个过滤器:{{ ...

随机推荐

  1. P5663 加工零件

    P5663 加工零件 题解 暴力搜索 搜索显然会TLE #include<iostream> #include<cstdio> #include<cstdlib> ...

  2. vue官网笔记

    学习了vue后又重新过了一遍官网的教程,选择性地摘抄了一些自己觉得比较重要的知识点.以备后面查缺补漏用. 计算属性 计算属性mounted中,属性值函数将用作属性的getter函数.当函数中的依赖发生 ...

  3. 使用java自带线程池

    java提供自带的线程池,而不需要自己去开发一个自定义线程池了. 线程池类ThreadPoolExecutor在包java.util.concurrent下   ThreadPoolExecutor ...

  4. HashSet的实现原理,简单易懂

    HashSet的实现原理,简单易懂   答: HashSet实际上是一个HashMap实例,都是一个存放链表的数组.它不保证存储元素的迭代顺序:此类允许使用null元素.HashSet中不允许有重复元 ...

  5. PAT 甲级 1052 Linked List Sorting (25 分)(数组模拟链表,没注意到不一定所有节点都在链表里)

    1052 Linked List Sorting (25 分)   A linked list consists of a series of structures, which are not ne ...

  6. query解决touchmove时屏蔽touchend

    var dragging = false; $("li").on("touchmove",function(){ dragging = true; }); $( ...

  7. 移动端APP测试总结

    移动APP测试,除了基础功能测试测试方法外,需要额外关注以下方面: 兼容性测试 流量测试 电量测试 弱网络测试 稳定性测试 安全测试 环境相关测试 apk性能测试 兼容性测试 针对App通常会考虑这些 ...

  8. oracle jdk和openjdk区别;idea如何加载jdk源码并调试jdk代码

    两个jdk的区别 oracle jdk是sun/oracle(甲骨文)公司的,部分jdk开源:相对比较稳定,使用的比较多. openjdk是完全开源的,据说是官方oracle唯一承认的开源版本. id ...

  9. jenkins的slave/agent如何通过tcp端口和master建立连接

    Jenkins是master-slave/agent结构,可以通过代理把任务下发到各个agent/slave上去执行 如图,首先在master上开启代理配置,指定master上开启的tcp端口,以及和 ...

  10. Leetcode之148. Sort List Medium

    https://leetcode.com/problems/sort-list/ Sort a linked list in O(n log n) time using constant space ...