vue的过滤器

今天研究下 vue的过滤器

文章目录

  • 一、是什么?
  • 二、如何用


一、是什么?

输送介质管道上不可缺少的一种装置。

通俗的话就是把一些不必要的东西过滤掉

需要注意的是,过滤器实质不改变原始数据,只是对数据进
行加工处理后返回过滤后的数据再进行调用处理,可理解为一个纯函数。

Vue 允许自定义过滤器,可被用于一些常见的文件格式化

Vue3中已废弃 filter

二、如何用

两个地方:插值和v-bind表达式,

{{name | Name}}
<div :id="nameL | nameS"></div>

定义filter
在组件的选项中定义本地的过滤器

filters:{
  Name:function(value){
	if(!value) return ''
	value = value.toString()
	return value.charAt(0).toUpperCase() + value.slice(1)
	}
}

定义全局过滤器

Vue.filter("Name",function(value){
 if(!value) return ''
 value = value.toString()
 return value.charAt(0).toUpperCase()+value.slice(1)
})

注意:全局和局部重名时,会采用局部的。
过滤器可以串联:

{{name | Name} | ss | mm}

过滤器是js函数,可以接收参数

{{ name | Name('arg',a)}}

例子:

<div id="app">
  <p>{{msg | msgFormat('data','--')}}</p>
</div>
<script>
 Vue.filter('msgFormat',function(msg,arg,a){
	return msg.replace(/name/g,a)
})
</script>
  • 局部过滤器优先于全局过滤器
  • 一个表达式可以使用多个过滤器。必不可少的 | 管道符隔开。其执行顺序从左往右。

你可能感兴趣的:(vue学习,vue.js,前端,javascript)