最新文章
- MySQL中, group by 和 order by 一起使用会有排序问题,group by 和 order by 同时使用时要注意的地方
- Vue学习笔记(10) ——Vue组件中的data和methods
- Vue学习笔记(9) ——Vue组件创建的几种方式
- Vue学习笔记(8) ——Vue实例的生命周期
- Vue学习笔记(7) —— 过滤器 filter的基本使用
- Vue学习笔记(6) ——v-if指令和v-show指令
- Vue学习笔记(5) —— v-for指令和key属性
- Vue学习笔记(5) —— Vue中样式-class样式和style样式
- Vue学习笔记(4) —— v-model指令,双向数据绑定
- Vue学习笔记(3) —— Vue事件修饰符
关注我


Vue学习笔记(7) —— 过滤器 filter的基本使用
- 分类:WEB前端
- 时间:2020-10-04
- 共1097人围观
过滤器,顾名思义,过滤就是一个数据经过了这个过滤之后出来另外一个形式的数据,可以是从中取得你想要的,或者给那个数据添加点什么装饰,那么过滤器则是过滤的工具。例如,从['abc','abd','ade']数组中取得包含‘ab’的值,那么可通过过滤器筛选出来‘abc’和‘abd’;把‘Hello’变成‘Hello World’,那么可用过滤器给值‘Hello’后面添加上‘ World’;或者把时间戳改为时间格式等等都可以使用过滤器。
Vue.js 允许你自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在两个地方:mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符指示;
一、过滤器使用方法
1、{{ msg | filterA }}双括号插值内。
2、<h1 v-bind:id=" msg | filterA">{{ msg }}</h1>v-bind绑定的值的地方。(msg为需要filter处理的值,filterA为过滤器。)
3、{{ msg | filterA }}单个使用。
4、{{ msg | filterA| filterB }}多个连用。
二、全局过滤器的示例代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>过滤器的基本使用</title> <script src="https://www.whmblog.cn/static/js/lib/vue-2.4.0.js"></script> </head> <body> <div id="app"> <p>将msg数据进行过滤器名为msgFormat的过滤,再进行进行过滤器名为test的过滤</p> <p>{{ msg | msgFormat('疯狂', '123') | test }}</p> </div> <script> // 定义一个 Vue 全局的过滤器,名字叫做 msgFormat Vue.filter('msgFormat', function (msg, arg, arg2) { // 字符串的 replace 方法,第一个参数,除了可写一个 字符串之外,还可以定义一个正则 return msg.replace(/单纯/g, arg + arg2) }) Vue.filter('test', function (msg) { return msg + '========' }) // 创建 Vue 实例,得到 ViewModel var vm = new Vue({ el: '#app', data: { msg: '曾经,我也是一个单纯的少年,单纯的我,傻傻的问,谁是世界上最单纯的男人' }, methods: {} }); </script> </body> </html>
三、要点
1、过滤器分全局过滤器和局部过滤器
2、过滤器可以用在两个地方:双花括号插值 或 v-bind表达式。
3、全局过滤器使用:Vue.filter( filterName,( )=>{ return // 数据处理结果 } ) ,通过全局过滤器讲一个别的小知识点:当我们引用vue框架时,vue会被自动添加到window全局对象上边,而Vue正是一个构造函数,里边定义的是一些静态方法和静态属性,我们知道在ES6类中有静态方法,只有类可以调用!这样也就不难理解了,filter全局过滤器可以被Vue所调用,因为它是一个静态方法。
4、过滤器的作用是:过滤器可以用来筛选出符合条件的,丢弃不符合条件的,既可以筛选,又可以对筛选出来的进行加工。