过滤器-Vue中全局过滤器的基本使用|学习笔记

简介: 快速学习过滤器-Vue中全局过滤器的基本使用

开发者学堂课程【Vue.js 入门与实战:过滤器-Vue中全局过滤器的基本使用】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/586/detail/8146


过滤器-Vue中全局过滤器的基本使用


内容简介:

一、 过滤器的概念

二、 过滤器的定义

三、 过滤器的基本使用

 

一、过滤器的概念


表格中的时间格式并不标准,所以要获取标准的时间就需要把它进行格式化,我们使用Vue中提供的过滤器来进行相关操作。

 image.png

Vue.js允许你自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在两个地方:

 

mustache插值和v-bind表达式,其他地方一律不允许使用。过滤器应该被添加在JavaScript表达式的尾部,由"管道"符指示。

 

二、过滤器的定义


(1)过滤器调用时的格式

{{name | 过滤器的名称}}

写一个name,如果需要对name输出之前做进一步的处理,可以在name后面,通过管道符( | )的形式,给它一个过滤器,比如{{name | nameope}},就是在输出name的值之前先调用nameope进行一下处理,并把处理的结果当作内容渲染到其中。

 

(2)过滤器的定义语法:

Vue.filter('过滤器的名称',function(){})

需要把前面的名称传递给过滤器进行处理,处理的过程就是一个函数调用的过程。第一个是过滤器的名称;第二个(function)代表对传过来的数据做什么样的处理。

举例:

Vue.filter('过滤器的名称',function(data){
return data + '123'
})

data是管道符前面的值需要交给过滤器去处理,过滤器要拿到传过来的值,就通过function的第一个参数来拿。

像return data + '123'这种,只要你想输出name,一调用过滤器,name后面就会自动添加'123'的后缀。

(3)过滤器中的function

过滤器中的function,第一个参数是固定的,永远都是过滤器管道符前面传过来的数据。

 

三、过滤器的基本使用


在前端开发软件中新建一个html文件,在文件中输入vh自动生成代码

,在data:{}中输入msg:'曾经,我也是一个单纯的少年,单纯的我,傻傻的问,谁是世界上最单纯的男人';

并在div标签中添加一个p标签<p>{{msg}}</p>

右键点击html文件,选择浏览,可以在浏览器中看见输出的数据。

 

过滤器是用来做输出前最后一层的处理,原数据不会被修改。

首先调用过滤器,定义一个名字叫做msgFormat的Vue全局过滤器,只要导入Vue包就能在整个全局访问到Vue对象。

Vue .filter('msgFormat',function(msg){
   return msg.replace(/单纯/g, '邪恶')
})

使用replace方法将'单纯'替换为'邪恶',得到一个处理结果,直接return把数据返回到p标签中,然后输出结果,完成替换。字符串的replace方法,第一个参数,除了可以写一个字符串之外,还可以定义一个正则。

 

为了简化代码,可以修改p标签的内容:

<p>{{msg | msgFormat('疯狂'+1,'123')}}</p>

修改过滤器里面的内容,实现多条数据的调用:

Vue .filter('msgFormat',function(msg,arg,arg2){
return msg.replace(/单纯/g, arg+arg2)
})

过滤器的第一个位置除了拿到管道符前面的值,第二个位置可以传参;过滤器在调用的过程中可以调用多个参数;过滤器可以多次调用。

Vue .filter('test',function(msg){
return msg+ '========='
})

每当调用这个过滤器,会把数据后面加上一串等号。所以,过滤器可以多次的去调用。

 

如果调用了多次,把原始的值交给第一个过滤器处理,出来的结果再交给第二个过滤器处理,直到最后一个过滤器调用完毕,把最终的结果放入p标签中。

 

<p>{{ msg | msgFormat('疯狂+1','123') | test }}</p>

完整代码,如下:

<!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>Document</title>
 <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
 <div id="app">
  <p>{{ msg | msgFormat('疯狂+1','123') | test }}</p>
 </div>
 <script>
  Vue .filter('msgFormat',function(msg,arg,arg2){
   return msg.replace(/单纯/g, arg+arg2)
})
Vue .filter('test',function(msg){
   return msg+ '========='
})
var vm = new Vue({
el: '#app',
data:{
msg: '曾经,我也是一个单纯的少年,单纯的我,傻傻的问,谁是世界上最单纯的男人'
 },
Methods:{}
});
</script>
</body>
</html>


相关文章
|
4月前
|
JavaScript 前端开发
【Vue面试题二十一】、Vue中的过滤器了解吗?过滤器的应用场景有哪些?
这篇文章介绍了Vue中的过滤器,包括过滤器的定义、使用方式、串联使用以及在Vue 3中的废弃情况,并探讨了过滤器在文本格式化、单位转换等场景下的应用,同时分析了过滤器在Vue模板编译阶段的工作原理。
【Vue面试题二十一】、Vue中的过滤器了解吗?过滤器的应用场景有哪些?
|
JavaScript 开发者
24-Vue之过滤器基本用法
24-Vue之过滤器基本用法
|
7月前
|
JavaScript 前端开发
Vue过滤器(filters)的简单使用
Vue过滤器(filters)的简单使用
|
7月前
|
JavaScript 前端开发
vue如何使用路由拦截器
vue如何使用路由拦截器
67 0
|
存储 JavaScript 前端开发
【Vue2.0源码学习】过滤器篇
【Vue2.0源码学习】过滤器篇
43 0
|
JavaScript
VUE学习笔记--过滤器
VUE学习笔记--过滤器
|
JavaScript 前端开发 开发者
过滤器-Vue 中全局过滤器的基本使用|学习笔记
快速学习过滤器-Vue 中全局过滤器的基本使用
115 0
过滤器-Vue 中全局过滤器的基本使用|学习笔记
|
JavaScript
vue课程65 使用vue-filter定义全局过滤器
vue课程65 使用vue-filter定义全局过滤器
115 0
vue课程65 使用vue-filter定义全局过滤器
|
JavaScript 前端开发
前端-vue基础40-带参数的过滤器
前端-vue基础40-带参数的过滤器
116 0
前端-vue基础40-带参数的过滤器
|
JavaScript 索引
Vue课程64-过滤器的基本用法
Vue课程64-过滤器的基本用法
93 0
Vue课程64-过滤器的基本用法