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

- 日理万妓 2023-02-09 14:25 10阅读 0赞

### 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、局部的过滤器可以一次性定义很多个，全局过滤器实例化一次只能定义一个过滤器