vue实战之Filter传入多个参数

2023-11-10


前言

vue过滤器Filter用于格式化文本,即我们日常的为数字添加¥或 $ 符号等简单操作。但在现实场景中除了$,往往会有略微复杂的情况出现,如:给多个不同的循环表单中的每一项加入标题,像销售单一,销售单二;运输单一,运输单二。
若按照Filter单参数传递来实现的话,那我们不得不创建多个filter来满足需求,如果我们可以为filter传入第二个参数:表名。是不是我们只需一个filter就可以替代多个重复又略有不同filter了呢。
所以,下面就来实现一个Filter多参数的实现。


注意:当全局过滤器和局部过滤器重名时,会采用局部过滤器。

一、Filter多参数

1.创建全局过滤器

// value >>> 循环下标 index
// text  >>> 表名
// numberToString >>> 数字转中文数字方法
Vue.filter('toolToString',(value,text) =>{
    return text + utils.numberToString(String(value + 1));
})

2.引用实现

<template>
	<!-- 运输单列表 -->
	<view class="layout-margin" v-for="(item,index) in purchase_record_list" :key="index">
   		<transport-order :value='index | toolToString("运输工具")' ></transport-order>
	</view>
	<!-- 销售单列表 -->
	<view class="layout-margin" v-for="(item,index) in supply_supplier_pro" :key="index">
   		<transport-order :value='index | toolToString("销售单")' ></transport-order>
	</view>
</template>


总结

有事没事的小帅哥,靓女们点个关注谢谢啦。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue实战之Filter传入多个参数 的相关文章

随机推荐

  • 猜测1~100以内数字

    案例 系统随机生成一个1 100之间的数字 玩家进行猜测 如果猜错 提示玩家数字过大或者过小 如果猜对恭喜玩家胜利 并且退出游戏 1 系统生成随机数 添加随机数种子 作用是利用当前系统时间生成随机数 防止每次随机数都一样 srand uns
  • qt中qDebug()无法输出解决办法

    在调试qt程序 无论是debug版本还是release版本 都会遇到此类问题 先将其总结在此 现象描述 无论是头文件还是源文件中都有 include
  • LeetCode热题100道

    文章目录 1 两数之和 2 两数相加 3 无重复字符的最长子串 4 最长回文子串 5 盛最多水的容器 6 删除链表的倒数第 N 个结点 7 Day 2 未完待续 1 两数之和 通往 LeetCode 两数之和 的任意门 解法一 暴力解 采用
  • IE可以打开网页 但是chrome和火狐打不开网页解决办法

    一次偶然 电脑的浏览器打不开常用的网页 奇怪的是IE可以打开 之外的其他浏览器都不可以 结果百度一下 找到一个帖子 亲自测试一下 果真可以解决 记录如下 1 开始 运行 输入CMD 确定 输入netsh winsock reset 按Ent
  • 123-----JS基础-----键盘移动div(通过键盘事件移动div矩形的练习)

    一 代码 很简单
  • DARTS代码分析(Pytorch)

    最近在看DARTS的代码 有一个operations py的文件 里面是对各类点与点之间操作的方法 OPS none lambda C stride affine Zero stride avg pool 3x3 lambda C stri
  • YOLOv7和YOLOv5对比

    YOLO You Only Look Once 是一种基于深度学习的目标检测框架 它通过在单次前向传播中检测所有对象来实现高效目标检测 YOLOv7和YOLOv5是YOLO的不同版本 其中YOLOv7是较新的版本 在计算效率和精度方面 YO
  • IDA调试安卓应用

    先安装好IDA工具 找到需要放到android上的android server文件 我这里是64位的 将android server64放入到手机 data local tmp adb push d as data local tmp as
  • 前端面试题集锦(7)

    目录 1 常见的跨域方式 2 对象的遍历方法 3 数组扁平化 4 typeof 原理 5 介绍类型转化 6 闭包的问题和优化 7 浏览器和Node事件循环的区别 1 常见的跨域方式 JSONP JSONP 是利用外链脚本 没有跨源限制的特点
  • Java算法基础:使用递归算法实现,平方相加1^2 + 2^2 + 3^2 +...+ n^2。

    package algorithm recursion public class RecursionTest public static void main String args int m 5 int sumOfSquares sumO
  • CMake的安装(超级详细)

    安装路径 CMake 官方下载网址 https cmake org download 这里以 win10 64 位系统为例 点击下载 cmake 3 17 2 win64 x64 ms i 安装步骤 找到安装包 双击打开 打开界面如下 勾选
  • 高德API实现地理逆编码

    阅读官网 API 文档 查看各参数含义 当我们想获取北京市 麦当劳 全部餐饮地址时 请求的地址 https restapi amap com v3 place text keywords 麦当劳 city 北京 offset 20 page
  • G2Plot(antV)柱状图demo

    1 npm下载G2Plot antV 并引入项目 G2Plot antV G2Plot 开箱即用的图表库 AntV 也可以在线或下载到本地引入 2 基础柱状图 单个的 图例目前没有找到怎么显示 3 图表代码
  • 华为OD机试 - 免单统计(Java)

    题目描述 华为商城举办了一个促销活动 如果某顾客是某一秒内最早时刻下单的顾客 可能是多个人 则可以获取免单 请你编程计算有多少顾客可以获取免单 输入描述 输入为 n 行数据 每一行表示一位顾客的下单时间 以 年 月 日时 分 秒 毫秒 yy
  • java进制转换工具类

    本文主要写进制转换的工具类 具体的各个方法讲解见上一篇 进制转换 进制转换工具类及算法 1 工具类 2 二进制相加 主页传送门 传送 1 工具类 进制转换是人们利用符号来计数的方法 进制转换由一组数码符号和两个基本因素 基数 与 位权 构成
  • 从传导骚扰测试实质分析来解决传导骚扰问题

    从传导骚扰测试实质分析来解决传导骚扰问题 1前言 2测试目的 3测试示意图 4电源端口传导骚扰测试实质 5实际案例分析 1前言 传导骚扰 主要针对电源端口 测试是电磁兼容测试中不容易通过的测试项目之一 本文从电源端口传导测试实质开始 结合实
  • 路由追踪命令:tracert、pathping 值得收藏

    对于网络工程师来说 需要熟练掌握的Windows路由追踪命令有两个 tracert和pathping 其中pathping是tracert和ping命令的结合 不但可以追踪目标IP地址的路由 还可以测试经过的每一跳的时延和丢包率 trace
  • 华为OD机试,C语言实现:IP地址整数表示

    描述 原理 ip地址的每段可以看成是一个0 255的整数 把每段拆分成一个二进制形式组合起来 然后把这个二进制数转变成 一个长整数 举例 一个ip地址为10 0 3 193 每段数字 相对应的二进制数 10 00001010 0 00000
  • 总结: C++ 中如何把输出结果写入到文件中

    文是我在网上搜到额一些经验汇总 C 把输出结果写入到文件中 文件 I O 在C 中比烤蛋糕简单多了 在这篇文章里 我会详细解释ASCII和二进制文件的输入输出的每个细节 值得注意的是 所有这些都是用C 完成的 一 ASCII 输出 为了使用
  • vue实战之Filter传入多个参数

    文章目录 前言 一 Filter多参数 1 创建全局过滤器 2 引用实现 总结 前言 vue过滤器Filter用于格式化文本 即我们日常的为数字添加 或 符号等简单操作 但在现实场景中除了 往往会有略微复杂的情况出现 如 给多个不同的循环表