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)
	  }
  },