vue初学习（六）——filter过滤器

filter 过滤器的使用

filter主要用于处理数据格式问题，分为局部和全局的用法

与computed计算属性的最大区别就是 filter可以是全局的，但是计算属性不能，他们能够完成的工作可以是相同的；computed是通过绑定函数的方式来执行，filter是用管道符在数据后面隔开

filter局部用法：定义一个过滤器名称：数值会执行什么样的函数

	<div id="app">
	    <h3> 没有进行过滤器处理的数据 </h3>
	      <p> {{ money }} </p>
	      <p> {{ date }} </p>
	    <h3> 经过过滤器处理的数据 </h3>
	      <p> {{ money | moneyFilter }} </p>
	      <p> {{ date | dateFilter }} </p>
	  </div>
	</body>
	<script src="../../lib/vue.js"></script>
	<script>
	  new Vue({
	    el: '#app',
	    data: {
	      money: 100,
	      date: new Date()
	    },
	    filters: {
	      'moneyFilter': val => {
	        return '￥' + val
	      },
	      'dateFilter': val => {
	        const d = new Date( val )
	        return d.getFullYear() +'-'+ ( d.getMonth() + 1 < 10 ? ('0' + (d.getMonth() + 1) ) : (d.getMonth() + 1)) + '-' + d.getDate()
	      }
	    }
	  })
	</script>

---

filter全局用法：实例化一个过滤器（过滤器名称，数据执行的函数）

	<div id="app">
	    <h3> 没有进行过滤器处理的数据 </h3>
	      <p> {{ money }} </p>
	      <p> {{ date }} </p>
	    <h3> 经过过滤器处理的数据 </h3>
	      <p> {{ money | moneyFilter }} </p>
	      <p> {{ date | dateFilter }} </p>
	  </div>
	</body>
	<script src="../../lib/vue.js"></script>
	<script>
	  // 写一次只能注册一个过滤器
	  Vue.filter('moneyFilter',val => {
	    // val  其实就是 已有数据
	    return '￥' + val
	  })
	  Vue.filter('dateFilter',val => {
	    const d = new Date( val )
	    return d.getFullYear() +'-'+ ( d.getMonth() + 1 < 10 ? ('0' + (d.getMonth() + 1) ) : (d.getMonth() + 1)) + '-' + d.getDate()
	  })
	  new Vue({
	    el: '#app',
	    data: {
	      money: 100,
	      date: new Date()
	    }
	  })
	</script>

全局过滤器和局部过滤器的区别：
1、全局的作用范围更大些
2、局部的过滤器可以一次性定义很多个，全局过滤器实例化一次只能定义一个过滤器