摘要：过滤器的使用方法有几种，今天讲一种，以社区为示例，转换类型为中文汉字。文件如下下面在文件中引入并使用过滤器上面的很重要，如果没有，过滤器将无法使用。将的值传给过滤器自动转换。
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里面：
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/90804.html
摘要：后续会改成的版本安装安装编译语法使用编译语法图片路径与打包安装引入图片需要依赖的加载器样式引入打包文件编译打包引入样式文件编译 vue2.x-cnode 关于项目 vue2.x Cnode社区是基于vue、vue-router、vuex、axios、es6开发，使用webpack构建工具编译打包项目 如果此开源项目对大家学习vue的全家桶有帮助，请给我一个star,因为你的star让我...
摘要：温馨提示这个项目主要是用来学习的，所以我会不断建分支重写，下一个分支是。更加温馨的提示已经将运用在了大型的项目中，反响一流，下一步是转，希望喜欢的同学坚定信念啊。 github-explorer Rebuild with Vue 2.0 源码地址1.x版本Live DemoReact版 Demo 简介 之前看到了一个很有意思的项目，是一位大牛写的github-explorer。他用的是...
摘要：看过的源码都知道，其双向数据绑定原理是通过的，中的方法来实现数据劫持的，但是有一个弊端就是无法兼听到数组内部的数据变化当然我们可以通过，来实现内部数据变化的检测。相比有一定的性能问题。 showImg(https://segmentfault.com/img/bVbsjcO?w=640&h=372);看过Vue2.x的源码都知道，其双向数据绑定原理是通过es5的Object.defin...
摘要：基于的电商图片放大镜插件动画截图使用步骤安装使用配置图片地址大图地址图片放大倍数放大时页面是否可滚动注意事项组件默认是的高宽，所以建议将组件包含在一个有固定高宽的容器内。 最近在撸一个电商网站，有一个需求是要像淘宝商品详情页那样，鼠标放在主图上，显示图片放大镜效果，找了一下貌似没有什么合适的vue插件，于是自己撸了一个，分享一下。小白第一次分享，各位大神莫见笑。 vue-piczoom...
摘要：年前就打算学习并总结一下，但是因为年前工作比较多，所以进展十分缓慢，现在终于学了一大部分，而且自己在学习开发中也踩了不少坑也总结了不少，所以将自己踩过的坑总结一下分享出来。因为在项目中使用了，所以对于也有一个踩坑总结，点击链接。 年前就打算学习并总结一下vue2.x，但是因为年前工作比较多，所以进展十分缓慢，现在终于学了一大部分，而且自己在学习开发中也踩了不少坑也总结了不少，所以将自己...
阅读 3433·2023-04-25 18:14
阅读 1525·2021-11-24 09:38
阅读 3244·2021-09-22 14:59
阅读 3059·2021-08-09 13:43
阅读 2561·2019-08-30 15:54
阅读 562·2019-08-30 13:06
阅读 1540·2019-08-30 12:52
阅读 2719·2019-08-30 11:13
