过滤器

过滤器

过滤器是一个使用在 双大括号插值 和 v-bind 中，用于过滤输出内容的函数， 对内容（数据）进行过滤（二次处理）的一种方式

过滤器的使用

过滤器的使用：很类似与管道流

管道流：将第一位的结果，以参数（第一位）的形式传递给下一个，以此类推

• | : 管道符，表示数据从左至右通过管道符进行传递
• 过滤器可以有多个，执行顺序从左至右，过滤器函数第一个参数的值就是其管道符前一个的结果

注册过滤器

全局过滤器

Vue.filter('过滤器名称', 过滤器函数);

局部过滤器

Vue.component('组件', {
  ...,
  filters: {
  	'过滤器名称': 过滤器函数	
	}
})

实例

<div id="app">
        <li v-for = "item of items">
          <span>名称：{{item.name}}</span>        
          <span>价格：{{item.price | reb("$")}}</span>        
    </li>
    </div>
    <script>
        //Vue.filter("过滤器名称"，过滤的方式)
        Vue.filter("reb",function(price,flag){
            
            return `${flag}`+ (price / 50).toFixed(2);
                
        })
        let app = new Vue({
            el:"#app",
            data:{
                items:[
                    {id:1,name:"iphone",price:"88888"},
                    {id:2,name:"ipad",price:"66666"},
                    {id:3,name:"iMac",price:"199999"},
                ]
            },
            
        })
    </script>