详解VUE2.X过滤器的使用方法


Posted in Javascript onJanuary 11, 2018

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文件中过滤器。文件如下:

详解VUE2.X过滤器的使用方法

下面在vue文件中引入并使用过滤器:

详解VUE2.X过滤器的使用方法

上面的filters很重要,如果没有,过滤器将无法使用。

最后就是在div中的使用了。非常简单。如下:

详解VUE2.X过滤器的使用方法

上面的change就是过滤器。item.tab将tab的值传给change过滤器自动转换。你可以在common.js中写更多的过滤器或其他方法。使用方法都是一样的。

你也可以直接将过滤器写在vue文件中。就写在filters里面:

详解VUE2.X过滤器的使用方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
非常有用的40款jQuery 插件推荐(系列二)
Dec 25 Javascript
window.addEventListener来解决让一个js事件执行多个函数
Dec 26 Javascript
浅析用prototype定义自己的方法
Nov 14 Javascript
jquery 按键盘上的enter事件
May 11 Javascript
javascript教程:关于if简写语句优化的方法
May 17 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
Jul 31 Javascript
JS实现图片平面旋转的方法
Mar 01 Javascript
webpack中使用iconfont字体图标的方法
Feb 22 Javascript
深入理解JavaScript和TypeScript中的class
Apr 22 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
Jun 19 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
Feb 21 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
Sep 16 Javascript
Vuex提升学习篇
Jan 11 #Javascript
浅谈Node.js爬虫之网页请求模块
Jan 11 #Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
Jan 11 #Javascript
angular2中Http请求原理与用法详解
Jan 11 #Javascript
基于node下的http小爬虫的示例代码
Jan 11 #Javascript
JS脚本实现网页自动秒杀点击
Jan 11 #Javascript
Javascript网页抢红包外挂实现分享
Jan 11 #Javascript
You might like
PHP中查询SQL Server或Sybase时TEXT字段被截断的解决方法
2009/03/10 PHP
php面向对象全攻略 (十七) 自动加载类
2009/09/30 PHP
腾讯CMEM的PHP扩展编译安装方法
2015/09/25 PHP
php技巧小结【推荐】
2017/01/19 PHP
PHP关键特性之命名空间实例详解
2017/05/06 PHP
如何实现动态删除javascript函数
2007/05/27 Javascript
javascript (用setTimeout而非setInterval)
2011/12/28 Javascript
js随机颜色代码的多种实现方式
2013/04/23 Javascript
jquery1.9 下检测浏览器类型和版本的方法
2013/12/26 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
2014/01/02 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
2014/04/23 Javascript
DOM基础教程之使用DOM + Css
2015/01/20 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
2015/08/11 Javascript
深入浅析同源策略和跨域访问
2015/11/26 Javascript
深入浅析JS的数组遍历方法(推荐)
2016/06/15 Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
2016/09/28 Javascript
深入解析Vue 组件命名那些事
2017/07/18 Javascript
深入理解vue-router之keep-alive
2017/08/31 Javascript
Angular 4.0学习教程之架构详解
2017/09/12 Javascript
vue将文件/图片批量打包下载zip的教程
2020/10/21 Javascript
JavaScript实现网页tab栏效果制作
2020/11/20 Javascript
Python爬取附近餐馆信息代码示例
2017/12/09 Python
Python简单实现的代理服务器端口映射功能示例
2018/04/08 Python
使用matplotlib绘制图例标签中带有公式的图
2019/12/13 Python
python打印异常信息的两种实现方式
2019/12/24 Python
Miller Harris官网:英国小众香水品牌
2020/09/24 全球购物
shell程序中如何注释
2012/01/28 面试题
团组织关系介绍信
2014/01/12 职场文书
毕业生自荐书
2014/02/02 职场文书
岗位职责风险点
2014/03/12 职场文书
个人公开承诺书
2014/03/28 职场文书
财务人员担保书
2014/05/13 职场文书
干部作风纪律整顿心得体会
2016/01/23 职场文书
Vue实现导入Excel功能步骤详解
2021/07/03 Vue.js
SONY AN-LP1 短波有源天线放大器图
2022/04/05 无线电
Python通过loop.run_in_executor执行同步代码 同步变为异步
2022/04/11 Python