学习目标：vue中使用过滤器filters

---

学习内容：

目标：在vue中使用过滤器fiters,
提示：过滤器就是一个数据进行过滤之后得到新的数据，可以从之前的数据中提取出你需要的数据或者在原来的数据中加入新的数据。
 

• · 过滤器定义
  全局过滤器：

  Vue.filter('globalFilter', function (value) {
    return value + "!!!"
  })

  
  组件过滤器（局部）：

  filters:{
    componentFilter:function(value){
      return value + "!!!"
    }
  },

  
  上面有种写法有个需要注意的问题：全局注册时是 filter，没有s的。而组件过滤器是 filters，是有s的，这要注意了，虽然你写的时候没有s不报错，但是过滤器是没有效果的

  简单介绍了一下过滤器的写法，后面会结合用法有更详细的讲解，下面我们来讲一下过滤器的使用方法。

  · 过滤器用法
  一、在双花括号插值 

   

  {{ 'ok' | globalFilter }}

  
  二、在v-bind表达式中使用 

  <div v-bind:data="'ok' | globalFilter" ></div>

  
  · 过滤器参数写法 
  写法一：

   {{ message | filterA | filterB }}

  
  上述代码中，message 是作为参数传给 filterA 函数，而 filterA 函数的返回值作为参数传给 filterB 函数，最终结果显示是由 filterB 返回的。
  

   

   

  写法二： 

   {{ message | filterA('arg1', arg2) }}

  
  上述代码中，filterA 的第一个参数是 message，依次是 arg1、arg2
  

   

   

  写法三：

   {{ 'a','b' | filterB }}

  
  上述代码表示 'a' 和 'b' 分别作为参数传给 filterB
  

例子：

 

<template>
	<view>
        ￥{{2054.008|NumFormat}}
	</view>
</template>

//过滤器
		filters: {
			NumFormat(number) {
				var number=number.toString()
				if (!number) return '0.00';
				var intPart = Number(number).toFixed(0); //获取整数部分
				var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') //比如2054转为2,054
				var floatPart = ".00"; //预定义小数部分
				var value2Array = number.split(".");
				//=2表示数据有小数位
				if (value2Array.length == 2) {
					floatPart = value2Array[1].toString(); //拿到小数部分
					if (floatPart.length == 1) { //补0,实际上用不着
						return intPartFormat + "." + floatPart + '0';
					} else {
						return intPartFormat + "." + floatPart;
					}
				} else {
					return intPartFormat + floatPart;
				}
			}

		},

---