Vue--过滤器

过滤器用于格式化一些数据

语法 ：

数据 | 过滤器名字

 

例子：

<div id='app'>
    {{text | lowercase}}
</div>
<script src='../js/vue.js'></script>
<script>
    new Vue({
        el : '#app',
        data : {
            text : 'HELLO VUE'
        }
    });
</script>

提示 ：lowercase用于把字母变成小写。lowercase是vue自带的过滤器， 然而vue在2.0的版本以后，为了保证库的精简化，作者把所有自带的过滤器都删掉了。

 

自定义过滤器

虽然自带的过滤器在2.0的版本都被删除了，但是我们可以使用Vue的静态方法filter来实现我们的过滤器。自定义过滤器与自定义指令相似

 

语法 ：

Vue.filter（'过滤器名字'， 回调函数）

 

例子 （格式化日期对象）

<div id='app'>
    {{time | formatDate}}
</div>
<script src='../js/vue.js'></script>
<script>
    Vue.filter('formatDate', function(date){
        var year = date.getFullYear();
        var month = date.getMonth()+1;
        var day = date.getDate();
        var hours = date.getHours();
        var minutes = date.getMinutes();
        var seconds = date.getSeconds();
 
        month = month < 9 ?  '0' + month : month;
        day = day < 9 ? '0' + day : day;
        hours = hours < 9 ? '0' + hours : hours;
        minutes = minutes < 9 ? '0' + minutes : minutes;
        seconds = seconds < 9 ? '0' + seconds : seconds;
 
        return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
    });
    
    new Vue({
        el : '#app',
        data : {
            time : new Date()
        }
    })
</script>

需要注意的是，最后面需要return

 

过滤器传参

过滤器的传参与指令的传参一样。只能以字符串的形式传递参数。

 

语法：

数据 | 过滤器名字 “字符串”

 

例子：

<div id='app'>
    <p>{{12  | moneny '$'}}</p> 
</div>
<script src='../js/vue.js'></script>
<script>
    Vue.filter('moneny', function(val, str){
        return val + str
    });
    new Vue({
        el : '#app'
    });
</script>

输出12$