Vue2之filters过滤器基础与进阶

最新推荐文章于 2024-05-14 08:57:42 发布

暴怒的代码

最新推荐文章于 2024-05-14 08:57:42 发布

阅读量2.1k

点赞数 3

分类专栏： # vue2学习日常文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/c18559787293/article/details/132890591

版权

vue2学习日常专栏收录该内容

21 篇文章 0 订阅

订阅专栏

一. 前言

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

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;
    }
});