Vue2之filters过滤器基础与进阶

目录

一. 前言

二. 私有过滤器与全局过滤器

      1. 私有过滤器  

        （1） 在插值表达式或v-bind属性中使用管道符

        （2） 在vue实例的filters节点中过滤方法

      2. 全局过滤器

三：过滤器的注意点

---

一. 前言

       Vue是一套用于构建用户界面的渐进式框架，该框架被设计为可以自底向上逐层应用，与其他大型框架大为不同。该框架核心库只关注视图层，既易于上手，又能通过npm包管理器与第三方库整合。

         而过滤器（Filters）是 vue 为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方：插值表达式和 v-bind 属性绑定。 过滤器应该被添加在 JavaScript 表达式的尾部，由“管道符”进行调用。

二. 私有过滤器与全局过滤器

      1. 私有过滤器  

        （1） 在插值表达式或v-bind属性中使用管道符

                

        （2） 在vue实例的filters节点中过滤方法

        

运行结果：

 

全部代码：

<template>
	<div class="homes">
		<div class="oldData">{{age}}</div>
		<div :id='age | addAge'>{{age|changeAge}}</div>
	</div>
</template>

<script>
	export default{
		data() {
			return{
				age:23
			}
		},
		filters:{
			changeAge(age){
				return '我今年' + age + '岁啦！' 
			},
			addAge(age){
				// 年龄+1
				return age+1
			}
		}
	}
</script>

 

      2. 全局过滤器

        在 filters 节点下定义的过滤器，称为“私有过滤器”，因为它只能在当前 vm 实例所控制的 el 区域内使用。

        如果希望在多个 vue 实例之间共享过滤器，则可以按照如下的格式定义全局过滤器：

 

//过滤器可以与 {{ }} 绑定一起使用，也可以在v-bind 中使用。如下代码可以将一个字符串略缩为一个定长字符串：
<p>{i description | truncate }}</p>

//在Vue.js中通过调用 Vue.filter() 可以全局注册一个过滤器，可以在其它的 Vue 实例中使用。
//这个方法有两个参数，第一个参数是过滤器的名称，第二个参数是一个函数，这个函数被用来处理需要过滤的值。
//truncate 是过滤器的名称，它接收一个字符串并将其截断为指定的长度.
Vue.filter( 'truncate', function (text,length,suffix){
    if (text.length > length){
        return text.substring(0，length) + suffix;}
    else {
        return text;
    }
});

三：过滤器的注意点

1. 要定义到 filters 节点下，本质是一个函数
2. 在过滤器函数中，一定要有 return 值
3. 在过滤器的形参中，可以获取到“管道符”前面待处理的那个值
4. 如果全局过滤器和私有过滤器名字一致，此时按照“就近原则”，调用的是”私有过滤器“