10。过滤器

|叫做管道符号，管道符号前面是要进行格式化的值，管道符号后面是过滤器的名称

全局过滤器要定义在new Vue的前面filter

<p>{{msg|toupper}}</p>
Vue.filter('toupper',(v)=>{
    return v.charAt(0).toUpperCase(0)+v.substr(1)
    })

Vue.filter('过滤器的名字',(v)=>{})，在后面这个函数中处理函数

 

基础过滤器：本地过滤器

通过     filters：{过滤器名字：函数（v）{}}   定义

在函数中写具体数据处理格式的逻辑代码并且return结果

在视图中使用过滤器

	<div class="somes">
			本地过滤器
			{{somes|tolower}}
		</div>

data: function () {
    return {
	  somes:'ABCD'
    }
  },


 filters:{
	  'tolower':(v)=>{
		 return v.substring(0,3)+ v.substr(3).toLowerCase()
	  }
  }

跟data，methods同级

 

过滤器使用注意的事项

过滤器传参数：其中，默认的第一个参数时要格式化的数据，第二个参数时要传的值

	{{somes|tolower('第二个参数')}}


     filters:{
	  'tolower':(v)=>{
		 return v.substring(0,3)+ v.substr(3).toLowerCase()
	  }
  }

串联使用：

将已经更改的数据，再次格式化，其中第二个过滤器处理的是前民过滤器处理完以后的

<div class="chuan">
			串联过滤器
			{{count | toplu |tomul}}
		</div>
data: function () {
    return {
   	  count:1
    }
  },
  filters:{
	  'toplu':(v)=>{ 
		  return v+5
		  console.log(v)
	  },
	   'tomul':(v)=>{
		   return v*100
	  		console.log(v)
	  }
  },