标签：floatPart vue return number filters 过滤器 filterA

学习目标：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;
				}
			}

		},

标签：floatPart,vue,return,number,filters,过滤器,filterA
来源： https://blog.csdn.net/weixin_49296337/article/details/120905182

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。