【vue】过滤器的使用
一、在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】过滤器的使用的更多相关文章
- Vue 过滤器的使用
Vue官方文档是这样说的:Vue过滤器用于格式化一些常见的文本. 在实际项目中的使用: 定义过滤器 在src定义一个filter.js文件,里面定义过滤器函数,在最后要使用 exprot defaul ...
- vue 过滤器filters的使用以及常见报错小坑(Failed to resolve filter)
今天使用vue 过滤器中发现一个小坑,网上查到的大都是不正确的解决方法,故分享给大家: 原错误代码: // 过滤器 filter:{ FdishList:function(value){ if (!v ...
- vue过滤器微信小程序过滤器和百度智能小程序过滤器
因为最近写了微信小程序和百度小程序,用到了过滤器,感觉还挺好用的,所以就来总结一下,希望能帮到你们. 1. 微信小程序过滤器: 1.1:首先建一个单独的wxs后缀的文件,一般放在utils文件夹里面. ...
- 换个角度使用VUE过滤器
换个角度使用VUE过滤器 过滤器在Vue中的主要用于文本格式化,如小写转大小,日期格式化等操作.官方对这个功能介绍也很简单,不过确实很简单,就一个函数而已.但最近在做两款APP时,遇到一些特殊的需求. ...
- 3.Vue过滤器
1.概念: Vue.js 允许你自定义过滤器,可被用作一些常见文本的格式化,过滤器可以用在两个地方:mustache 插值和 v-bind 表达式.过滤器应该被添加在 JavaScript 表达式的尾 ...
- 黑马vue---31-32、vue过滤器实例
黑马vue---31-32.vue过滤器实例 一.总结 一句话总结: vue内部的东西,无论是过滤器还是组件,都是键值对的方式 1.过滤器的定义语法? Vue.filter('过滤器的名称', fun ...
- 带你掌握Vue过滤器filters及时间戳转换
摘要:Vue的filters过滤器是比较常见的一个知识点,下面我将结合时间戳转换的例子带你快速了解filters的用法. 本文分享自华为云社区<三分钟掌握Vue过滤器filters及时间戳转换& ...
- Vue - 过滤器
1.内部过滤器 1):字母操作: ---- 针对字符串 A:capitalize B:uppercase C:lowercase 2):json过ingfy滤器,可将表达式的值转化为Json字符串,本 ...
- Vue 过滤器与计算属性
过滤器 V1.x 版本 过滤器基础 过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,可以参考官方文档,http://cn.vuejs.org/ ...
- 第六节:Vue过滤器的用法和自定义过滤器
1.过滤器的用法,用 '|' 分割表达式和过滤器. 例如:{{ msg | filter}} {{msg | filter(a)}} a就标识filter的一个参数. 用两个过滤器:{{ ...
随机推荐
- 【转载】 什么是P问题、NP问题和NPC问题
原文地址: http://www.matrix67.com/blog/archives/105 转载地址: https://www.cnblogs.com/marsggbo/p/9360324.htm ...
- 22Flutter中的常见的按钮组件 以及自定义按钮组件
/* Flutter中的常见的按钮组件 以及自定义按钮组件 一.Flutter中的按钮组件介绍 Flutter里有很多的Button组件,常见的按钮组件有:RaisedButton/FlatButto ...
- spring bean容器加载后执行初始化处理@PostConstruct
先说业务场景,我在系统启动后想要维护一个List常驻内存,因为我可能经常需要查询它,但它很少更新,而且数据量不大,明显符合缓存的特质,但我又不像引入第三方缓存.现在的问题是,该List的内容是从数据库 ...
- 不同操作系统上DNS客户端操作区别汇总
结论:windows有DNS缓存,Linux默认无DNS缓存,只能依赖于安装其他软件. 一.不同操作系统的客户端的DNS缓存差别 1.windows 系统中dns 解析器会使用系统的dns缓存来提高d ...
- 阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_20-认证接口开发-接口测试
测试接口 因为继承了spring security会拦截这个请求,我们需要写代码 让他对这个认证接口放行 查看代码发现之前已经写过放行的代码了 发现是路径前面少了auth 加断点,测试.申请令牌 r ...
- OLE导出EXCEL 问题处理
需求: 2.资产负债表.利润表导出优化,由于项目公司门店较多,需要增加批量导出功能.按纳税主体维度导出execl文件,输入了几个纳税主体,就生成几个execl文件. 实现: 用程序ZFIR0014XL ...
- Core Data 的线程安全问题
前言: 很多小的App只需要一个ManagedContext在主线程就可以了,但是有时候对于CoreData的操作要耗时很久的,比如App开启的时候要载入大量数据,如果都放在主线程,毫无疑问会阻塞UI ...
- Win10使用Tex Live和VS Code和Latex Workshop插件编写Latex文档(未完成版本)
首先取Tex Live官网下载安装包:https://www.tug.org/texlive/acquire-netinstall.html 我下载的是 http://mirror.ctan.org/ ...
- Exploit completed, but no session was created.
在kali上做metasploit实验,步骤如下: msf5 exploit(windows/mssql/mssql_payload) > show options Module options ...
- Egret入门学习日记 --- 第十二篇(书中 5.1节 内容)
第十二篇(书中 5.1节 内容) 昨天把 第4章完成了. 今天来看第5章. 接下来是 5.1节 的内容. 总结一下 5.1节 的重点: 1.如何制作一个公用按钮皮肤. 跟着做: 重点1:如何制作一个公 ...