详解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 相关文章推荐
一个javascript参数的小问题
Mar 02 Javascript
Firefox下提示illegal character并出现乱码的原因
Mar 25 Javascript
30个经典的jQuery代码开发技巧
Dec 15 Javascript
js操作css属性实现div层展开关闭效果的方法
May 11 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
Aug 21 Javascript
node-http-proxy修改响应结果实例代码
Jun 06 Javascript
Bootstrap三种表单布局的使用方法
Jun 21 Javascript
JavaScript评论点赞功能的实现方法
Mar 13 Javascript
Vue列表页渲染优化详解
Jul 24 Javascript
使用Vue CLI创建typescript项目的方法
Aug 09 Javascript
Layui给switch添加响应事件的例子
Sep 03 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
Nov 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查找任何页面上的所有链接的方法
2013/12/03 PHP
PHP使用GD库制作验证码的方法(点击验证码或看不清会刷新验证码)
2017/08/15 PHP
Add a Picture to a Microsoft Word Document
2007/06/15 Javascript
jquery api参考 visualjquery 中国线路 速度快
2007/11/30 Javascript
Mootools 1.2教程 输入过滤第一部分(数字)
2009/09/15 Javascript
js操作ajax返回的json的注意问题!
2010/02/23 Javascript
Javascript实现的鼠标经过时播放声音
2010/05/18 Javascript
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
2011/04/01 Javascript
仿新浪微博返回顶部的jquery实现代码
2012/10/01 Javascript
JavaScript限定复选框的选择个数示例代码
2013/08/25 Javascript
ie下$.getJSON出现问题的解决方法
2014/02/12 Javascript
JQuery获取表格数据示例代码
2014/05/26 Javascript
js利用prototype调用Array的slice方法示例
2014/06/09 Javascript
js实现select二级联动下拉菜单
2020/04/17 Javascript
jQuery与JavaScript节点创建方法的对比
2016/11/18 Javascript
javascript实现秒表计时器的制作方法
2017/02/16 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
2017/07/05 Javascript
Angular4实现动态添加删除表单输入框功能
2017/08/11 Javascript
js排序与重组的实例讲解
2017/08/28 Javascript
使用selenium抓取淘宝的商品信息实例
2018/02/06 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
2019/06/06 jQuery
vue v-model的用法解析
2020/10/19 Javascript
python pandas 对时间序列文件处理的实例
2018/06/22 Python
python实现网站用户名密码自动登录功能
2019/08/09 Python
python实现微信小程序用户登录、模板推送
2019/08/28 Python
CSS3对图片照片进行边缘模糊处理的实现
2018/08/08 HTML / CSS
C&A巴西网上商店:时尚、衣服、手机和鞋子
2020/06/07 全球购物
最新的大学生找工作自我评价
2013/09/29 职场文书
工商管理专业职业生涯规划
2014/01/01 职场文书
拾金不昧表扬信范文
2014/01/11 职场文书
企业文明单位申报材料
2014/05/16 职场文书
植树节口号
2014/06/21 职场文书
JS新手入门数组处理的实用方法汇总
2021/04/07 Javascript
JVM上高性能数据格式库包Apache Arrow入门和架构详解(Gkatziouras)
2021/05/26 Servers
一文搞清楚MySQL count(*)、count(1)、count(col)区别
2022/03/03 MySQL
电脑开机弹出documents文件夹怎么回事?弹出documents文件夹解决方法
2022/04/08 数码科技