详解VUE2.X过滤器的使用方法
时间:2019-04-12
本文章向大家介绍详解VUE2.X过滤器的使用方法,主要包括详解VUE2.X过滤器的使用方法使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
VUE2.X过滤器的使用方法有几种,今天讲一种,以cnode社区API为示例,转换tab类型为中文汉字。
首先我们在assets文件夹中新建个js的文件夹,并新建common.js,然后将过滤器写在这个文件中。当然你也可以写在单个组件中,这个等下后面说。
/** * 将tab类型转换成汉字 * @param {String} tab 待转换前的tab值 * @return {String} 转换后的tab中文 */ export function change (tab) { switch (tab) { case 'share': return '分享' case 'ask': return '问答' case 'job': return '招牌' case 'good': return '精华' } }
上面是common.js文件中过滤器。文件如下:
下面在vue文件中引入并使用过滤器:
上面的filters很重要,如果没有,过滤器将无法使用。
最后就是在div中的使用了。非常简单。如下:
上面的change就是过滤器。item.tab将tab的值传给change过滤器自动转换。你可以在common.js中写更多的过滤器或其他方法。使用方法都是一样的。
你也可以直接将过滤器写在vue文件中。就写在filters里面:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- [WCF-Discovery]让服务自动发送上/下线通知[实例篇]
- [WCF权限控制]利用WCF自定义授权模式提供当前Principal[实例篇]
- [WCF权限控制]利用WCF自定义授权模式提供当前Principal[原理篇]
- [自定义服务器控件] 第一步:文本框。
- 检查两个数据库里的表名、字段是否一致的一种方法
- 如何在Python中从零开始实现随机森林
- 基类、接口的应用——表单控件:一次添加、修改一条记录,一次修改多条记录。(上)
- 使命必达: 深入剖析WCF的可靠会话[协议篇](下)
- 分页控件和几个相关控件的源代码
- Python编程中的反模式
- Python机器学习库:Scikit-Learn简介
- 很简单的企业管理器---我写程序的方式,几个自定义控件。
- 使命必达: 深入剖析WCF的可靠会话[原理揭秘篇](上)
- 其实添加数据也可以这样简单——表单的第三步抽象(针对UI及后置代码)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【Python】基于某些列删除数据框中的重复值
- SQL Server 每日一题--解析天气预报员
- 未读消息(小红点),前端与 RabbitMQ实时消息推送实践,贼简单~
- 手把手教你用neo4j搭建简单关联图谱(基于家有儿女中的人物关系)
- c#中的静态本地方法
- C#加解密
- SQL Server 每日一题--解析老N的收入
- neo4j中导入数据的两种常用方式(千万级和亿级)
- Entity Framework Core 实现全局查询过滤
- Entity Framework Core 捕获数据库变动
- SQL Server 每日一题--解析产品
- Python绘制漫天的雪花,漫步天涯
- c#8内插逐字字符串增强功能
- EF Core 数据验证
- 网站优化,这些工具你一定用得着