详解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 通用简单的table选项卡实现
May 07 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
Apr 20 Javascript
JS弹出层单纯的绝对定位居中示例代码
Feb 18 Javascript
js中函数调用的两种常用方法使用介绍
Jul 17 Javascript
Javascript中call与apply的学习笔记
Sep 22 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
Mar 05 Javascript
jquery获取form表单input元素值的简单实例
May 30 Javascript
React组件之间的通信的实例代码
Jun 27 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
Jul 10 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
Aug 20 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
May 05 Javascript
react国际化react-intl的使用
May 06 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.ini中文版(1)
2006/10/09 PHP
php小技巧 把数组的键和值交换形成了新的数组,查找值取得键
2011/06/02 PHP
PHP中date()日期函数有关参数整理
2011/07/19 PHP
php中$_POST与php://input的区别实例分析
2015/01/07 PHP
Thinkphp3.2简单解决多文件上传只上传一张的问题
2017/09/26 PHP
php的单例模式及应用场景详解
2021/02/27 PHP
Android中资源文件(非代码部分)的使用概览
2012/12/18 Javascript
用JQuery 判断某个属性是否存在hasAttr的解决方法
2013/04/26 Javascript
JS的Document属性和方法小结
2013/09/17 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
2014/03/19 Javascript
Javascript中对象继承的实现小例
2014/05/12 Javascript
javascript实现自动填写表单实例简析
2015/12/02 Javascript
JavaScript数据推送Comet技术详解
2016/04/07 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
2017/02/17 Javascript
详解Nodejs之npm&package.json
2017/06/15 NodeJs
layui select动态添加option的实例
2018/03/07 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
2019/01/19 Javascript
新手快速入门微信小程序组件库 iView Weapp
2019/06/24 Javascript
微信小程序如何自定义table组件
2019/06/29 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
2019/07/22 Javascript
python BeautifulSoup使用方法详解
2013/11/21 Python
Python实现根据指定端口探测服务器/模块部署的方法
2014/08/25 Python
Python使用matplotlib模块绘制图像并设置标题与坐标轴等信息示例
2018/05/04 Python
OpenCV里的imshow()和Matplotlib.pyplot的imshow()的实现
2019/11/25 Python
pyinstaller打包找不到文件的问题解决
2020/04/15 Python
python爬取代理IP并进行有效的IP测试实现
2020/10/09 Python
纯css3实现的鼠标悬停动画按钮
2014/12/23 HTML / CSS
W Hamond官网:始于1979年的钻石专家
2020/07/20 全球购物
高中生的自我鉴定范文
2014/01/24 职场文书
素质拓展感言
2014/01/29 职场文书
服装促销活动方案
2014/02/23 职场文书
三问三解心得体会
2014/09/05 职场文书
2015个人简历自我评价语
2015/03/11 职场文书
公司车队管理制度
2015/08/04 职场文书
JavaScript中关于预编译、作用域链和闭包的理解
2021/03/31 Javascript