vue[过滤器的使用整理记录]

vue中过滤器是一个比较常用的内容，而且用起来也是非常简单方便的。

定义过滤器

在vue中定义过滤器可以分为局部定义和全局定义
局部定义：即在组件内容定义，因此也只能在本组件中使用

<script>
export default{
    
    
 ......
	filters: {
    
    
	  // 定义一个叫cap的局部过滤器
	  cap: function (value) {
    
    
	  	// ... 这里定义过滤器的逻辑
	    return value.toString();
	  }
 	}
......
}
</script>

全局定义：全局定义的过滤器可以全局使用。

import Vue from 'vue';
// 定义一个叫cap的全局过滤器
Vue.filter('cap', function (value) {
    
    
  // ... 这里定义过滤器的逻辑
  return value.toString();
})

过滤器的使用

过滤器通常用在html内容中并且在{ {}}(双花括号)中使用或者 v-bind 中使用,用 | (管道符)来分隔。如：

<template>
<div>
	<!-- 在双花括号中 -->
	<span>{
    
    {
    
     message | cap}}</span>
	
	<!-- 在 `v-bind` 中 -->
	<div v-bind:id="message | cap"></div>
</div>
</template>

补充：
1.过滤器是可以叠加使用的。如：

<template>
	<span>{
    
    {
    
     message | cap | cbp}}</span>
</template>

上面的内容中使用的两个过滤器，其效果可以理解为先使用 cap 过滤得到第一个结果，在将得到的结果使用 cbp 过滤得到最终的结果。

2.过滤器的本质是一个js函数，因此也可以接受参数的

<template>
	<span>{
    
    {
    
     message | cap('test')}}</span>
</template>

cap 这个过滤器将接收2个参数，第一个参数为message，第二个参数为’test’，倘若有2个以上的参数则类推即可，而且无论如何第一个参数必然是message(即管道符之前的那个变量)。