过滤器

过滤器

1、什么是过滤器

• 用来格式化数据的一个函数
• 语法 Vue.filter( 过滤器的名称， 过滤器的回调函数 )
• 过滤器要想获得我们的数据，要通过一个叫做 ‘管道符 | ’ 来获取数据
• 过滤器是对已经有的数据进行格式化，也就是必须先有数据，再去格式化

扩展：

• vue 1.x 版本借鉴了 angular , 提供 10 个过滤器， 包括有： 日期 小数点位数保留 货币 大小写 等

• Vue 2.x 废弃了这 10个过滤器，但是它提供了自定义过滤器的方式

2、使用方式

• 全局定义过滤器

<div id="app">
        <p>{{ time | timeFilter('/') }}</p>
</div>

<script>
    //全局定义过滤器
    Vue.filter('timeFilter',function(val,type){
        var date = new Date(val)
        return date.getFullYear() + type + (date.getMonth()+1) + type +date.getDate() //这个返回值就是会渲染到页面上的结果
    })
    new Vue({
        el:'#app',
        data:{
            time:Date.now()
        }
    })
</script>

• 局部定义过滤器

<div id="app">
        <p>{{ time | timeFilter('-') }}</p>
</div>

<script>
    new Vue({
        el:'#app',
        data:{
            time:Date.now()
        },
        filters:{
            'timeFilter':function(val,type){
                var date = new Date (val)
                return date.getFullYear() + type + (date.getMonth()+1) + type + date.getDate()
            }
        }
    })
</script>