Vue过滤器filter和filters的使用详解

2024-05-13 05:57:00

过滤器的作用

在使用插值表达式的时候，我们通常会有一种需求，就是将数据进行二次的格式化(比如日期的格式化)，Vue的过滤器的实现参考了linux的shell命令的管道的实现原理，即上一个命令的输出是下一个命令的输入,Vue.js 允许你自定义过滤器，作用是处理一些常见的文本格式化，过滤器可以用在双花括号插值和v-bind表达式上(后者从2.1.0+开始支持)。

全局过滤器和局部过滤器

有两种方式注册过滤器：全局注册和局部注册。

过滤器的使用

过滤器函数接受表达式的值作为第一个参数。过滤器还可以串联：{{ message | filterA | filterB}} 也就是{{ 数据| 过滤器A | 过滤器B }} 过滤器是JS函数，因此可以接受参数：{{ message | filterA(‘arg1’,arg2) }} 这里，message 是第一个参数，字符串 ‘arg1’ 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。除了在插值表达式里可以用过滤器外，在v-bind指令中也可以使用过滤器，与其用法一致。

下面看个实际应用例子，先来看下效果图，如下图:

模板上代码如下:

data里数据如下：

当苹果数量减为0时给它一个背景色为红色的禁用样式:

写上本地过滤器，接收两个参数:

再来看个全局过滤器的例子，最终效果图如下:

代码如下图:

如果咱们不加过滤器处理，那显示的日期会是Wed Apr 22 2020 23:41:34 GMT+0800 (中国标准时间)，但经过过滤器里的回调函数处理后就显示成了2020-04-22 23:41:34

Vue过滤器filter和filters的使用详解相关推荐

vue build text html,Vue中v-text / v-HTML使用实例代码详解_放手_前端开发者
废话少说,代码如下所述: /p> 显示123 /p> 补充:vuejs {{}},v-text 和 v-html的区别 {{message}} let app = new Vue({ el ...
移动端html5手写板,Vue+canvas实现移动端手写板步骤详解
这次给大家带来Vue+canvas实现移动端手写板步骤详解,Vue+canvas实现移动端手写板的注意事项有哪些,下面就是实战案例,一起来看一下. 清除保存 Canvas画板 var draw; v ...
vue 生命周期的11中方法详解
vue 生命周期的十一中方法详解 vue 生命周期的定义 vue实例从创建到销毁,也就是说从创建 -> 初始化数据-> 编译模版 -> 挂载Dom -> 渲染更新 -&g ...
vue的父子组件之间的通信详解
vue的父子组件之间的通信详解一.父组件给子组件传值父组件引入子组件,并对子组件进行监听 <template><div><h1&g ...
Vue过滤器-filter
Vue中的过滤器不能替代Vue中的methods.computed或者watch,因为过滤器不改变真正的data,而只是改变渲染的结果,并返回过滤后的版本.在很多不同的情况下,过滤器都是有用的,比如尽 ...
vue动态设置文字布局方式_详解Vue动态添加模板的几种方法
动态添加模板需要收集原始数据的页面,这个时候我们需要很多原始数据收集模板,下面给大家详解Vue 动态添加模板的几种方法,希望对你学习这方面知识有所帮助. 通常我们会在组件里的 template 属性定 ...
【Vue】Vue-cli(脚手架)的目录结构详解（转载）
一.图简单说明下各个目录都是干嘛的: 总体框架:一个vue-cli的项目结构如下,其中src文件夹是需要掌握的,所以本文也重点讲解其中的文件,至于其他相关文件,了解一下即可. 四.文件结构细分 1.b ...
vue内置动态组件component使用详解
1 动态组件介绍 component是vue内置组件,主要作用为动态渲染组件,基本用法如下: <!-- 动态组件由 vm 实例的 `componentName` property 控制 --&g ...
vue遇到ie兼容问题如何处理_详解vue 兼容IE报错解决方案
IE 页面空白报错信息此时页面一片空白报错原因 Babel 默认只转换新的 JavaScript 语法(如箭头函数),而不转换新的 API ,比如 Iterator.Generator.Set. ...
vue获取dom元素与修改样式详解
vue中如何获取dom元素呢? 步骤详解在标签上加上ref属性如 : 在js中通过 this.$refs.加ref的值便可以获取dom 如:this.$refs.refDemo 修改对应的样式名 ...

最新文章

热门文章