vue之filter用法

1、全局写法:

  全局过滤器必须写在vue实例创建之前。

Vue.filter('testfilter', function (value,text) {// 返回处理后的值return value+text})

2、局部写法:

在组件实例对象里挂载。
filters: {changemsg:(val,text)=>{return val + text}},

3、使用:

  只能使用在{{}}和:v-bind中,定义时第一个参数固定为预处理的数,后面的数为调用时传入的参数,调用时参数第一个对应定义时第二个参数,依次往后类推

<h3 :title="test|changemsg(1234)">{{test|changemsg(4567)}}</h3>
//多个过滤器也可以串行使用
<h2>{{name|filter1|filter2|filter3}}</h2>

4、vue-cli项目中注册多个全局过滤器写法:

//1.创建一个单独的文件定义并暴露函数对象
const filter1 = function (val) {return val + '--1'
}
const filter2 = function (val) {return val + '--2'
}
const filter3 = function (val) {return val + '--3'
}export default {filter1,filter2,filter3
}//2.导入main.js(在vue实例之前)
import filters from './filter/filter.js'//3.循环注册过滤器
Object.keys(filters).forEach(key=>{Vue.filter(key,filters[key])
})

 

  

转载于:https://www.cnblogs.com/superjsman/p/10052145.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/265331.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[summary] 单调队列

2019独角兽企业重金招聘Python工程师标准>>> 很久没做单调队列了╮(╯_╰)╭ 已经不太会了.... 单调队列究其本质就是队列,加上队尾可以删除. 队列都是从队尾插入,队首输出.单调队列也一样. 以队尾到队首递增的单调队列为例,我们需要保证队列的单调性,所以当插入一…

判断同构数 c语言,基于visual Studio2013解决C语言竞赛题之0413同构数

JQuery的基础和应用1.什么是? DOM的作用:提供了一种动态的操作HTML元素的方法. jQuery是一个优秀的js库.用来操作HTML元素的工具. jQuery和DOM ...tomcat 8在win8&period;1中的配置配置jdk: 三个步骤: 1.环境变量>新建 JAVA_HOME C:\Program Files\Java\jdk1.…

段错误的调试方法(printf输出、GDB)

参考&#xff1a;段错误产生原因及简单的调试方法 参考&#xff1a;如何解决段错误 参考&#xff1a;C语言gdb调试之精髓&#xff08;常用命令、多进程、多线程、程序日志&#xff09; 网址&#xff1a;https://www.bilibili.com/video/BV1ei4y1V758?fromsearch&seid40373…

Sparse Feature Learning

1. learn feature from sparse codes (source codes) : http://homes.cs.washington.edu/~lfb/ 2. parse scene(source codes):http://www.cs.illinois.edu/homes/slazebni/转载于:https://www.cnblogs.com/stoneresearch/p/4336332.html

c语言中error c2601,C 语言   dd.cpp(46) : error C2601: 'main' : local function definitions are illegal...

C 语言 dd.cpp(46) : error C2601: main : local function definitions are illegal0#include#includestruct phone{int num;int count;};int convet(char *p){ int i;for(i0;*p!\0;p){switch(*p){ case A:case B:case C:{p[i]2;i;continue;}case D:case E:case F:{p[i]3;i;c…

STM32使用IIC总线通讯协议在OLED屏幕上显示字符串、汉字、单总线获取DHT11模块温湿度并通过IIC显示到屏幕(软件IIC)

参考&#xff1a;基于stm32软件IIC的oled显示温湿度 作者&#xff1a;ZPZ DayUp 发布时间&#xff1a; 2021-07-25 20:52:43 网址&#xff1a;https://blog.csdn.net/m0_56197680/article/details/119077076?spm1001.2014.3001.5501 目录软件模拟IIC时序(起始、停止、应答、发…

区块链:定义未来金融与经济新格局

区块链:定义未来金融与经济新格局 1 区块链是什么 区块链的本质 区块链的本质是一种去中心化的记账系统&#xff0c;区块链与比特币之间的关系就是凯恩斯所说的记账货币与货币之间的关系&#xff0c;区块链是一套由信用记录以及信用记录的清算构成的体系。共识机制与价值载体 共…

Linux出现NOKEY

rpm --import /etc/pki/rpm-gpg/RPM*转载于:https://blog.51cto.com/someos/1338354

at指令返回值检验c语言,学渣求指教,如何识别字符串中的AT命令并逐个输出,求程序!!!...

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼Topic – to implement a parser to retrieve AT command line and print out (1) the tokensone by one and (2) the elapse time of each command line (processing).Please submit the solution in 48 hours.- The solution cou…

hdu 5730 Shell Necklace——多项式求逆+拆系数FFT

题目&#xff1a;http://acm.hdu.edu.cn/showproblem.php?pid5730 可以用分治FFT。但自己只写了多项式求逆。 和COGS2259几乎很像。设A(x)&#xff0c;指数是长度&#xff0c;系数是方案。 \( A(x)^{k} \) 的 m 次项系数表示 k 个连续段组成长度为 m 的序列的方案数。 \( B(x)…

虚拟磁带库

虚拟磁带库(Virtual Tape Library&#xff0c;VTL)&#xff0c;是指以磁盘作为自身存储介质&#xff0c;并能仿真为物理磁带库的产品。简单的说&#xff0c;虚拟磁带库就是将磁盘空间虚拟为磁带空间&#xff0c;能够在传统的备份软件上实现和传统磁带库同样功能的产品。传统磁带…

w ndows7端口在哪里,win7电脑遇到端口被占用的情况该如何查看并将其关闭

Windows7操作系统的酷炫和强大已经深受用户们的喜欢了&#xff0c;这里根大家分享的是教你查看win7电脑端口是否被占用的技巧&#xff0c;端口是我们在进行远程或者打印机等都会遇到的&#xff0c;但是有很多用户会遇到端口被占用的情况&#xff0c;遇到这样的问题首先就要找出…

STM32F103五分钟入门系列(十三)独立看门狗IWDG

参考&#xff1a;STM32F103五分钟入门系列&#xff08;十三&#xff09;独立看门狗IWDG 作者&#xff1a;自信且爱笑‘ 发布时间&#xff1a;2021-07-31 19:50:28 网址&#xff1a;https://blog.csdn.net/Curnane0_0/article/details/119269391?utm_sourceapp&app_version…

session-cookie 和token登录验证

最近研究了下基于token的身份验证&#xff0c;并将这种机制整合在个人项目中。现在很多网站的认证方式都从传统的seesioncookie转向token校验。对比传统的校验方式&#xff0c;token确实有更好的扩展性与安全性。    传统的sessioncookie身份验证    由于HTTP是无状态的…

高效使用Bitmaps(一) 大Bitmap的加载

转自&#xff1a;http://my.oschina.net/rengwuxian/blog/182885 高效使用Bitmaps有什么好处&#xff1f; 我 们常常提到的“Android程序优化”&#xff0c;通常指的是性能和内存的优化&#xff0c;即&#xff1a;更快的响应速度&#xff0c;更低的内存占用。Android程序的性能…

android自动软键盘,Android自定义软键盘

MyKeyboardAndroid自定义键盘的使用实现步骤第一步&#xff1a;1、新建一个xml文件夹放在res目录下面&#xff0c;然后新建xml文件:money_keyboard.xml2、然后在XML文件中添加按钮布局&#xff0c;这个布局就是键盘的样子了android:horizontalGap"1dp"android:keyWid…

433M射频遥控灯、震动感应灯、WIFI避障小车

目录 433M射频遥控灯1. 433M射频灯的硬件连接2. 具体接线剖析3.课堂干货简述4. 准备工作之环境搭建KEIL_ISP_USBTOTTL驱动5. KEIL建立工程6.电子可编程开关继电器的原理7. 上电灯亮代码编写8. 烧写程序到单片机,实现灯一亮一灭9.遥控灯编程实现及效果验证震动感应灯1. 入门项目…

Bootstrap使用-1

目录 结构&#xff1a;1. 视图函数2. 模板3. 登陆4. 怎样发生的添加模板基础模板提供的block定制基础模板结构&#xff1a; $ tree -I "__pycache*|*.pyc|*.xlsx" -FCL 3 . |-- templates/ | -- h1.html -- test-boostracp.py 1. 视图函数 test-boostracp.py from …

测试 SyntaxHighlighter

#include <stdio.h>int main() {return 0; }转载于:https://www.cnblogs.com/gongnaixiao/p/3472817.html

段错误、内存溢出、内存泄漏(区别)、堆溢出、栈溢出

参考&#xff1a;内存泄漏、内存溢出、段错误、堆溢出、栈溢出 作者&#xff1a;焦木白 发布时间&#xff1a;2019-10-22 网址&#xff1a;https://blog.csdn.net/jiaomubai/article/details/102680705?spm1001.2014.3001.5501 目录段错误内存溢出内存泄漏栈溢出堆溢出段错误 …