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时,遇到一些特殊的需求. ...
随机推荐
- PyQt(Python+Qt)学习随笔:QListView的flow属性
老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 QListView的flow属性用于控制视图中的数据排列方向,其类型为枚举类型QListView.F ...
- 凌乱的与ctf无关的小知识点
(1)在网页中一般不要用记住密码.否则想要知道你的密码很简单. 例子:看样子很安全,别人无法通过这些来获得你的其他密码(尤其是想我这样密码强度不高的人),但是知道要修改前端的选项,你的密码就会被暴露. ...
- tensorflow 小记——如何对张量做任意行求和,得到新tensor(一种方法:列表生成式)
希望实现图片上的功能 import tensorflow as tfa = tf.range(10,dtype=float)b = aa = tf.reshape(a,[-1,1])a = tf.ti ...
- pycharm 本地代码同步到github上
第一步, pycharm中setting-> Version Control -> Github -> addacount 如果账号密码登录不成功,就用token登录,参考下面这个博 ...
- 没有它你的DevOps是玩不转的,你信不?
摘要:架构的选择对于DevOps的实践是至关重要的,从某种程度上来说,架构就是DevOps这场战役的粮草,它是支撑着DevOps成功落地的重要前提. 善用兵者,役不再籍,粮不三载.取用于国,因粮于敌, ...
- Panda 交易所视点观察!区块链金融应用迎新规,哪些版块受影响?
Panda交易所获悉,近日央行下发推动<区块链技术规范应用的通知>(以下简称"通知")及<区块链技术金融应用评估规则>(以下简称"规则" ...
- logstash导入DNS解析数据到es中,中间有filebeat
这个过程中,主要用logstash处理数据的时候不好处理. 在logstash-sample.conf这个配置文件中的配置,我用这个监控filebeat的5044端口 # Sample Logstas ...
- java多线程之消费生产模型-使用synchronized解决虚假唤醒
package com.wenshao.juc; /** * 生产者和消费者案例 * * @author Administrator * */ public class TestProductorAn ...
- python程序的三种控制结构
程序的三种控制结构 什么是控制结构? """ 程序有三种基本结构组成:顺序结构.分支结构.循环结构.任何程序都是由这三种基本结构组成. 顺序结构是程序按照线性顺序依次执行 ...
- Jackson:我是最牛掰的 Java JSON 解析器(有点虚)
在当今的编程世界里,JSON 已经成为将信息从客户端传输到服务器端的首选协议,可以好不夸张的说,XML 就是那个被拍死在沙滩上的前浪. 很不幸的是,JDK 没有 JSON 库,不知道为什么不搞一下.L ...