Vue（六）过滤器

1. 简介
  • 用来过滤模型数据，在显示之前进行数据处理和筛选
  • 语法：{{ data | filter1(参数) | filter2(参数)}}
2. 关于内置过滤器
  • vue1.0中内置许多过滤器，如：currency、uppercase、lowercase、limitBy、orderBy、filterBy
  • vue2.0中已经删除了所有内置过滤器，全部被废除
　  如何解决：
  • a.使用第三方工具库，如lodash、date-fns日期格式化、accounting.js货币格式化等
  • b.使用自定义过滤器
3. 自定义过滤器
 
      分类：全局过滤器、局部过滤器
  • 3.l 自定义全局过滤器

 　　　   使用全局方法Vue.filter(过滤器ID,过滤器函数)

  • 3.2 自定义局部过滤器
    <script>
        /* 自定义全局过滤器 */
        
        /* 个位数补0 */
        Vue.filter('addZero',function(data){
            return data<10?'0'+data:data;
        });

        /* 保留几小数 四舍五入 toFixed方法不稳定*/
        Vue.filter('number',(data,n) => {
            return data.toFixed(n);
        })

        /* 日期的格式化处理 */
        Vue.filter('date',data =>{
            let d = new Date(data);
            return d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate()+' '+d.getHours()+':'+d.getMinutes()+':'+d.getSeconds();
        })


        window.onload=function(){
            let app = new Vue({
                el:'.container',
                data:{
                   currentTume:Date.now()
                },
                filters:{ //局部过滤器
                    number:(data,n) => {
                        return data.toFixed(n);
                    }
                }
            })
        }

    </script>

<body>

    <div class="container">
        <h3>{{ 8 | addZero }}</h3>
        <h3>{{ 12.345678 | number(3) }}</h3>
        
        <!-- 当前时间的毫秒值 -->
        <h3>{{currentTume | date}}</h3> 
    </div>

</body>
posted @ 2018-01-05 15:46  yulingjia  阅读(299)  评论(0)  编辑  收藏  举报