Vue过滤器

局部定义：

var vm = new Vue({
    el:"#app",
    data:{
        proData:''
    },
    filters: {
        pro_color(index){
            switch (index) {
                case 0:
                    return "per-bg-a";
                case 1:
                    return "per-bg-b";
                case 2:
                    return "per-bg-c";
                case 3:
                    return "per-bg-d";

            }
        }
    }
});

 

全局定义：

Vue.filter('pro_color', function (value) {
    pro_color(index){
        switch (index) {
            case 0:
                return "per-bg-a";
            case 1:
                return "per-bg-b";
            case 2:
                return "per-bg-c";
            case 3:
                return "per-bg-d";

        }
    }
});

在页面中使用:

<div class="layui-progress-bar" :class="5|pro_color"></div>
<div class="layui-progress-bar" :class="3|pro_color"></div>
.
.
这里的3或者5都会被当做实参出入到pro_color方法中去。好比是pro_color(3)或者pro_color(5)