vue中遍歷器的用法

首先展示的是局部過濾器的用法，又叫私有過濾器

	<template>
	  <div>
	     <!-- 調用時: 通過'|'管道符來過濾前面的title,管道符後面是過濾器的名字多個過濾器用管道符'|'隔開 -->
	      <h1>{{title | filterTitle('哦')}}</h1>   
	  </div>
	</template>
	
	<script>
	export default {
	  data () {
	    return {
	      title: '萌二'
	    }
	  },
	  /**
	   * val: 指的是 data中的title
	   * paramer:指的是上面調用這個過濾器傳的參數('哦')
	   * 'filterTitle'：是過濾器的名稱
	   */
	  filters: { // 過濾器的配置項
	   'filterTitle': (val, paramer) => {
	     return val + '招財貓' + paramer
	   }
	  }
	}
	</script>
	<style scoped  lang="scss">
	div{
	  margin: 0 auto;
	}
	h1{
	color:red;
	}
	</style>

渲染結果如下圖：

當多個過濾器應用於同一個屬性時：

	<template>
	  <div>
	      <h1>{{title | filterTitle('哦') | substrTitle}}</h1>
	  </div>
	</template>
	
	<script>
	export default {
	  data () {
	    return {
	      title: '萌二'
	    }
	  },
	  /**
	   * val: 指的是 data中的title
	   * paramer:指的是上面調用這個過濾器傳的參數('哦')
	   */
	  filters: { // 過濾器的配置項
	   'filterTitle': (val, paramer) => {
	     return val + '招財貓' + paramer // 渲染的結果是 萌二招財貓哦
	   },
	   'substrTitle': (val) => {
	     return val.substr(2) // 渲染的結果是 招財貓哦  
	   }
	
	  }
	}
	</script>
	<style scoped  lang="scss">
	div{
	  margin: 0 auto;
	}
	h1{
	  color:red;
	}
	</style>

渲染結果如下：

上面的這段代碼又加了一個過濾器，操作的結果：
說明一個過濾器可以同時作用於一個屬性，並且是從左到右執行，前一個遍歷器的結果是第二個遍歷器的參數

下面看一下全局的遍歷器

首先在vue項目的根目錄中添加一個utils文件夾，然後創建一個index.js的文件，用於放所有的遍歷器函數，下面的這個例子是一個反轉字符串的方法

然後在main.js中引入，並掛載到全局

最後在組件中引入即可

渲染的結果如下：