vue 过滤器 filter 的使用
1.局部过滤器的使用
比如性别,订单状态的数据,后端一般返回数字来代替状态。以性别为模拟数据,0是未知,1是男,2是女。
直接数据渲染出来,只有012,没有性别
根据后端返回的int类型值,前端对数据进行处理,并渲染在界面上。
在js里,建立一个局部过滤器 filters
export default {
data(){
return{
//模拟数据
sexData: [
{name: '测试',sex: '0'},
{name: '测试',sex: '1'},
{name: '测试',sex: '2'},
],
}
},
methods:{},
//局部过滤器
filters:{
formSex(set) { //formSex过滤器名 set表示要过滤的数据
const status = {
"0": "空白",
"1": "男",
"2": "女",
}
return status[set];
}
}
}
使用过滤器
<view v-for='(item,index) in sexData'>
<text>{{item.name}}</text> ----
<text>{{item.sex | formSex }}</text>
</view>
在实际开发中,全局的过滤器要比局部过滤器使用的更广泛一些,说白了我们为什么要使用过滤器,其实就跟使用函数是一样,把一些方法封装,供其它组件使用,这样调用起来更方便也更快捷。
2.通过循环来使用过滤器
在时后台返回的数据有多个字段,前端只需要其中一个字段。这时可以使用循环过滤来获取其中的一个字段。
模拟数据:
data() {
return {
//过滤后存放数据
list: [],
//过滤前的数据
listData: [
{'id': '0','name': '测试','image': '图片1'},
{'id': '0','name': '测试1','image': '图片1'},
{'id': '1','name': '测试2','image': '图片1'},
{'id': '1','name': '测试','image': '图片1'},
]
}
},
使用过滤器循环获取id为0的数据
//循环过滤id为0的数据
this.list = this.listData.filter((item, index) => {
return item.id == 0;
});
过滤后
项目地址:https://gitee.com/jielov/uni-app-tabbar
vue 过滤器 filter 的使用的更多相关文章
- vue - 过滤器filter的基本使用
1.全局过滤器 输出: 过滤器可以多次来调用 输出: 2.私有过滤器 <!DOCTYPE html> <html lang="en"> <head&g ...
- vue 过滤器filter的详解
1.代码运用的地方 <!-- 在双花括号中 --> {{ date | formatDate}} <!-- 在 `v-bind` 中 --> <div v-bind:id ...
- Vue 过滤器 Filter传递参数
给日期类型过滤器设置不同格式 dayjs是一款轻量级的日期操作库 https://day.js.org/en import Vue from 'vue' import dayjs from 'dayj ...
- vue的过滤器filter
前记: 排版记录,未免太耽误时间,我就简单的来,下面是一个vue 过滤器的写法,demo 演示,限制一个字符串的长度. vue filter 的官网介绍 https://cn.vuejs.org/v2 ...
- vue 过滤器filters的使用以及常见报错小坑(Failed to resolve filter)
今天使用vue 过滤器中发现一个小坑,网上查到的大都是不正确的解决方法,故分享给大家: 原错误代码: // 过滤器 filter:{ FdishList:function(value){ if (!v ...
- Vue - 过滤器
1.内部过滤器 1):字母操作: ---- 针对字符串 A:capitalize B:uppercase C:lowercase 2):json过ingfy滤器,可将表达式的值转化为Json字符串,本 ...
- Vue 过滤器的使用
Vue官方文档是这样说的:Vue过滤器用于格式化一些常见的文本. 在实际项目中的使用: 定义过滤器 在src定义一个filter.js文件,里面定义过滤器函数,在最后要使用 exprot defaul ...
- vue过滤器微信小程序过滤器和百度智能小程序过滤器
因为最近写了微信小程序和百度小程序,用到了过滤器,感觉还挺好用的,所以就来总结一下,希望能帮到你们. 1. 微信小程序过滤器: 1.1:首先建一个单独的wxs后缀的文件,一般放在utils文件夹里面. ...
- 换个角度使用VUE过滤器
换个角度使用VUE过滤器 过滤器在Vue中的主要用于文本格式化,如小写转大小,日期格式化等操作.官方对这个功能介绍也很简单,不过确实很简单,就一个函数而已.但最近在做两款APP时,遇到一些特殊的需求. ...
随机推荐
- 第八章、Designer组件属性编辑界面中QWidget类相关属性详解
老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 声明:本文为老猿Python学习研究精心整理而成,禁止转载. 内容提纲 引言概述QWidget属性列 ...
- 第 4篇 Scrum 冲刺博客
一.站立式会议 1.站立式会议照片 2.昨天已完成的工作 登录信息的匹配 3.今天计划完成的工作 ①售货员页面功能 ②销售排行 4.工作中遇到的困难 ①页面按钮太过复杂,逻辑错乱 ②有的同学数据库驱动 ...
- vue优点
低耦合.视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的"View"上,当View变化的时候Model可以不变,当Model变化的时候View ...
- 【题解】P2610 [ZJOI2012]旅游
link 题意 T国的国土可以用一个凸N边形来表示,包含 \(N-2\) 个城市,每个城市都是顶点为 \(N\) 边形顶点的三角形,两人的旅游路线可以看做是连接N个顶点中不相邻两点的线段.问一路能经过 ...
- ajax与浏览器请求的差异对比.png
- linux的Umask 为022 和027 都是什么意思?
用全部权限777去减这个数值 一.022表示默认创建新文件权限为755 也就是 rxwr-xr-x(所有者全部权限,属组读写,其它人读写) 二.027表示默认创建新文件权限为750 也就是rxwr- ...
- 手机版LED弹幕显示屏
这是一款可以自制超大滚动字幕的LED显示屏APP.可以随你喜欢, 演唱会,电竞比赛,晚会,接机,寻人! 随时随地输入文字, 传达讯息,酒吧夜店疯狂打Call工具!蹦迪必备!超帅!下载地址:https: ...
- numpy的好处
python是很慢的,因为python在执行代码的时候会执行很多复杂的check功能,比如 b=1; a=b/0.5 这个运算看起来很简单,但是在计算机的内部.b要先从一个整数integer转化成一个 ...
- 流程控制之☞ while 和 for 的故事
学习三连鞭... 什么是循环? 为什么要有循环? 如何用循环? 循环的基本语法:while 和 for 先来看while循环: while条件:首先得是个循环体. 1.如果条件为真,那么循 ...
- 卷积涨点论文 | Asymmetric Convolution ACNet | ICCV | 2019
文章原创来自作者的微信公众号:[机器学习炼丹术].交流群氛围超好,我希望可以建议一个:当一个人遇到问题的时候,有这样一个平台可以快速讨论并解答,目前已经1群已经满员啦,2群欢迎你的到来哦.加入群唯一的 ...