Vue 过滤器 filter(s) 的使用

即过滤器是用来格式化数据的一个函数。过滤器不会修改原始数据,它的作用是过滤数据,就是对数据进行加工处理并返回处理后的数据,比如做一些数据格式上的修改,状态转换等。

过滤器分为两种

组件内的过滤器(组件内有效)

全局过滤器(所有组件共享)

定义过滤器

第一个参数是过滤器的名字

第二个参数是过滤器的功能函数 (若不定义vue就不知道这个字符串是什么,有什么作用)。

过滤器的功能函数

声明 function(data,argv1,argv2...){}

第一个参数是传入的要过滤的数据,即调用时管道符 左边的内容。

第二个参数开始往后就是调用过滤器的时候传入的参数。

先注册,后使用

组件内 filters:{ 过滤器名: fn } fn 内通过 return 返回最终的数据

全局 Vue.filter('过滤器名',fn) fn 内通过 return 返回最终的数据

使用 {{ 数据 | 过滤器名 }}

全局

js 复制代码
Vue.filter('过滤器名称', function(val) { // val表示要被处理的数据
    // 过滤器业务逻辑,要有返回值
})
​
<div>{{ msg | 过滤器名称 }}</div>
<div v-bind="msg | 过滤器名称"></div>

局部

js 复制代码
data () {
    return {
        msg: 'hello world'
    }
},
//定义私用局部过滤器。只能在当前 vue 对象中使用
filters: {
    dataFormat: (msg, a) => { // msg表示要过滤的数据,a表示传入的参数
        return msg + a;
    }
}
​
<p>{{ msg | dataFormat('!')}}</p> // 结果: hello world!

注意事项

  • 全局注册时是 filter 没有 s , 而组件过滤器是 filters,是有 s 的,虽然写的时候没有 s 也不报错,但是过滤器是没有效果的。
  • 当全局过滤器和局部过滤器名字重复的时候,会以就近原则进行调用,即:局部过滤器优先于全局过滤器被调用
  • 一个表达式可以使用多个过滤器,其执行顺序从左往右,前一个过滤器的结果作为后一个过滤器的被处理数据,所以要注意使用顺序
相关推荐
木头没有瓜1 小时前
vscode离线安装插件
ide·vue.js·vscode
浪裡遊2 小时前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
夏梦春蝉3 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6
我想说一句3 小时前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript
markyankee1013 小时前
使用 Vue 脚手架创建项目的完整指南
vue.js
南屿im3 小时前
基于 Promise 封装 Ajax 请求:从 XMLHttpRequest 到现代化异步处理
前端·javascript
青松学前端3 小时前
vue-2.7源码解读之初始化流程和响应式实现
前端·vue.js·前端框架
杨进军3 小时前
前端线上问题的那些事儿
前端·javascript·前端框架
每天开心3 小时前
深入探索 React Hooks: useState 与 useEffect 的力量 🌟
前端·javascript·ai编程
流星稍逝3 小时前
Vue3 + Uniapp 图片压缩公共方法封装
前端·vue.js