您现在的位置是:首页 > 正文

vue——filter过滤器

2024-02-01 00:14:46阅读 1

参数是10,显示是100效果如下:

  •  {{ 'a','b' | filterB }} 表示'a'和'b'分别作为参数传给filterB

1、局部过滤器

  • 方式一

关键性代码

<div> {{ 10 | getNum(20) }} </div>
 <!--10是第一个参数,20是第二个参数,如果只有一个参数,小括号可以不用写-->
filters: {
    getNum(value, num) {
      return value * 10 + num;
    }
  }
  • 方式二(推荐)

在utils文件夹里新建filter.js文件

 

代码如下:

function getData(value, num) {
  return value*10 + num
}

module.exports = {
  getData: getData,
}

使用:

 

2、全局过滤器

在main.js中添加如下代码:

Vue.filter('getNum', function (value,num) {
  return value * 10 + num;
})

在需要使用到的地方:

<div> {{ 10 | getNum(20) }} </div>
 <!--10是第一个参数,20是第二个参数,如果只有一个参数,小括号可以不用写-->

3、附加:

多个过滤器串联:

{{ message | filterA | filterB }}

说明:filterA 被定义为接收单个参数的过滤器函数,表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB,将 filterA 的结果传递到 filterB 中。

网站文章

  • C语言|深入浅出讲解int转换为float全过程(附2017年统考大题案例)

    C语言|深入浅出讲解int转换为float全过程(附2017年统考大题案例)

    int转换为float类型为什么会发生精度损失? 精度损失的详细过程究竟是什么样的? 什么样情况float会发生精度损失?没有弄懂2017年浮点数统考大题? 这一篇用2017年统考大题案例帮你更深的理解浮点数的存储规则。

    2024-02-01 00:14:15
  • [洛谷5464]缩小社交圈

    xx 转载于:https://www.cnblogs.com/lxzl/p/11233989.html

    2024-02-01 00:14:10
  • 交叉表查询(普通行列转换)

    问题:假设有张学生成绩表(tb)如下: 姓名 课程 分数 张三 语文 74 张三 数学 83 张三 物理 93 李四 语文 74 李四 数学 84 李四 物理 94 想变成(得到如下结果): 姓名 语文 数学 物理 ---- ---- ---- ---- 李四 74  84  94 张三 74  83  93 ------------------

    2024-02-01 00:14:05
  • WIN32 API实现edit文本框的printf()函数

    在进行WIN32 API使用文本框编程时,很多情况下需要输出调试信息,或是直接输出一些有用的信息。我们通常使用SetWindowText()函数实现,但是其中的内容无法格式化修改,所以一般还要使用wsprintf()函数进行预格式化,最后还需要发送EM_SCROLL消息使滚动条显示到最下方,这就显得非常繁琐,往往要重复使用多次,失去了效率。修改之前的代码往往是这样的:GetLocalTi...

    2024-02-01 00:13:33
  • V8 引擎中的 JavaScript 数组实现分析与性能优化

    数组是 JavaScript 语言的一项基本功能,几乎每 个 JavaScript 应用程序中都会大量应用数组。由于 V8 的源程序公开,其运行机制可以通过分析其源程 序来深入了解。通过分析 Java...

    2024-02-01 00:13:28
  • Mysql学习-DQL

    DQL、SQL、Mysql

    2024-02-01 00:13:21
  • Shader(着色)

    Shader(着色)

    Shader(着色)

    2024-02-01 00:12:52
  • Ajax请求数据四部曲 cors解决跨域问题

    Ajax请求数据四部曲 cors解决跨域问题

    2024-02-01 00:12:47
  • 2021-06-10

    2021-06-10

    linux内核源码下载地址官网链接:https://www.kernel.org/HTTP https://www.kernel.org/pub/ GIT https://git.kerne...

    2024-02-01 00:12:11
  • 网络安全传输系统(5)—账号管理子系统设计

    1.登录模块设计输入用户名和密码 根据用户名从数据库提取密码 比较用户输入密码和数据库提取密码,以决定是否登录成功2.编译客户端程序arm-linux-gcc -L ../../008/openssl-1.0.0s/_install/lib/ -lssl -lcrypto -I ../../008/openssl-1.0.0s/_install/include/ -L ../....

    2024-02-01 00:11:55