正文
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)
