Vue中过滤器的使用

最新推荐文章于 2022-10-24 22:51:57 发布

Maple-Ning

最新推荐文章于 2022-10-24 22:51:57 发布

阅读量155

点赞数

分类专栏： vue笔记文章标签： vue.js javascript html

本文链接：https://blog.csdn.net/qq_57443373/article/details/120761868

版权

14 篇文章 0 订阅

订阅专栏

概念： 对要显示的数据进行特定格式化后再显示（适应于一些简单逻辑的处理）
Vue.js允许自定义过滤器，可被用于一些常见的文本格式化

格式：
过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示

过滤器可以用在两个地方，插值语法和v-bind表达式

<!-- 插值语法中-->

{{time|formatTime}}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

自定义过滤器的步骤：

1.注册过滤器
注册过滤器有两种方式，局部注册和全局注册
局部注册:

 new Vue({
	el:'#app',
	filters:{
		...
	}
})

全局注册:

  Vue.filter('myFilter',function(){
		...
  })

2.使用过滤器

<!--插值语法-->
<h2>{{time|formatTime}}</h2>
<!--v-bind-->
<div v-bind:id="rawId | formatId"></div>

要注意的是：
1.过滤器可以接收额外参数
2.多个过滤器可以串联
3.过滤器并没有改变原来的数据，而是产生新的对应数据

关注