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 的使用的更多相关文章

  1. vue - 过滤器filter的基本使用

    1.全局过滤器 输出: 过滤器可以多次来调用 输出: 2.私有过滤器 <!DOCTYPE html> <html lang="en"> <head&g ...

  2. vue 过滤器filter的详解

    1.代码运用的地方 <!-- 在双花括号中 --> {{ date | formatDate}} <!-- 在 `v-bind` 中 --> <div v-bind:id ...

  3. Vue 过滤器 Filter传递参数

    给日期类型过滤器设置不同格式 dayjs是一款轻量级的日期操作库 https://day.js.org/en import Vue from 'vue' import dayjs from 'dayj ...

  4. vue的过滤器filter

    前记: 排版记录,未免太耽误时间,我就简单的来,下面是一个vue 过滤器的写法,demo 演示,限制一个字符串的长度. vue filter 的官网介绍 https://cn.vuejs.org/v2 ...

  5. vue 过滤器filters的使用以及常见报错小坑(Failed to resolve filter)

    今天使用vue 过滤器中发现一个小坑,网上查到的大都是不正确的解决方法,故分享给大家: 原错误代码: // 过滤器 filter:{ FdishList:function(value){ if (!v ...

  6. Vue - 过滤器

    1.内部过滤器 1):字母操作: ---- 针对字符串 A:capitalize B:uppercase C:lowercase 2):json过ingfy滤器,可将表达式的值转化为Json字符串,本 ...

  7. Vue 过滤器的使用

    Vue官方文档是这样说的:Vue过滤器用于格式化一些常见的文本. 在实际项目中的使用: 定义过滤器 在src定义一个filter.js文件,里面定义过滤器函数,在最后要使用 exprot defaul ...

  8. vue过滤器微信小程序过滤器和百度智能小程序过滤器

    因为最近写了微信小程序和百度小程序,用到了过滤器,感觉还挺好用的,所以就来总结一下,希望能帮到你们. 1. 微信小程序过滤器: 1.1:首先建一个单独的wxs后缀的文件,一般放在utils文件夹里面. ...

  9. 换个角度使用VUE过滤器

    换个角度使用VUE过滤器 过滤器在Vue中的主要用于文本格式化,如小写转大小,日期格式化等操作.官方对这个功能介绍也很简单,不过确实很简单,就一个函数而已.但最近在做两款APP时,遇到一些特殊的需求. ...

随机推荐

  1. PyQt(Python+Qt)学习随笔:QListView的flow属性

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 QListView的flow属性用于控制视图中的数据排列方向,其类型为枚举类型QListView.F ...

  2. 凌乱的与ctf无关的小知识点

    (1)在网页中一般不要用记住密码.否则想要知道你的密码很简单. 例子:看样子很安全,别人无法通过这些来获得你的其他密码(尤其是想我这样密码强度不高的人),但是知道要修改前端的选项,你的密码就会被暴露. ...

  3. tensorflow 小记——如何对张量做任意行求和,得到新tensor(一种方法:列表生成式)

    希望实现图片上的功能 import tensorflow as tfa = tf.range(10,dtype=float)b = aa = tf.reshape(a,[-1,1])a = tf.ti ...

  4. pycharm 本地代码同步到github上

    第一步, pycharm中setting-> Version Control -> Github -> addacount 如果账号密码登录不成功,就用token登录,参考下面这个博 ...

  5. 没有它你的DevOps是玩不转的,你信不?

    摘要:架构的选择对于DevOps的实践是至关重要的,从某种程度上来说,架构就是DevOps这场战役的粮草,它是支撑着DevOps成功落地的重要前提. 善用兵者,役不再籍,粮不三载.取用于国,因粮于敌, ...

  6. Panda 交易所视点观察!区块链金融应用迎新规,哪些版块受影响?

    Panda交易所获悉,近日央行下发推动<区块链技术规范应用的通知>(以下简称"通知")及<区块链技术金融应用评估规则>(以下简称"规则" ...

  7. logstash导入DNS解析数据到es中,中间有filebeat

    这个过程中,主要用logstash处理数据的时候不好处理. 在logstash-sample.conf这个配置文件中的配置,我用这个监控filebeat的5044端口 # Sample Logstas ...

  8. java多线程之消费生产模型-使用synchronized解决虚假唤醒

    package com.wenshao.juc; /** * 生产者和消费者案例 * * @author Administrator * */ public class TestProductorAn ...

  9. python程序的三种控制结构

    程序的三种控制结构 什么是控制结构? """ 程序有三种基本结构组成:顺序结构.分支结构.循环结构.任何程序都是由这三种基本结构组成. 顺序结构是程序按照线性顺序依次执行 ...

  10. Jackson:我是最牛掰的 Java JSON 解析器(有点虚)

    在当今的编程世界里,JSON 已经成为将信息从客户端传输到服务器端的首选协议,可以好不夸张的说,XML 就是那个被拍死在沙滩上的前浪. 很不幸的是,JDK 没有 JSON 库,不知道为什么不搞一下.L ...