vue-过滤器实现数据的转换

Posted 2020-11-27 yinxin

将后端传来的数据转为要展示的数据：

{name:‘手机‘,state:‘0‘},
{name:‘电脑‘,state:‘1‘},
{name:‘包包‘,state:‘2‘},
{name:‘衣服‘,state:‘1‘}

将state对应的值转为要展示的值

window.onload = function(){
    new Vue({
        el:"#my",
        data:{
            name:‘‘, //添加的表单值
            lists:[
                {name:‘手机‘,state:‘0‘},
                {name:‘电脑‘,state:‘1‘},
                {name:‘包包‘,state:‘2‘},
                {name:‘衣服‘,state:‘1‘}
            ]
        },
        methods:{
            add:function(){  //添加
                //判断是否为空
                if(!this.name) return;
                this.lists.unshift({name:this.name,state:‘0‘});
                this.name = ‘‘;  //清除
            },
            del:function(i){  //删除
                this.lists.splice(i,1);  //i表示位置  1个数
            }
        },
        filters:{  //过滤器
            stateFilter:function(d){   //{{list.state | stateFilter}}    d=list.state 
                // if(d){
                //     return ‘已采购‘
                // }else {
                //     return ‘未采购‘
                // }
                switch(d){
                    case ‘0‘:
                        return ‘未采购‘;
                    case ‘1‘:
                        return ‘采购中‘;
                    case ‘2‘:
                        return ‘已采购‘;
                    default:
                        return d;
                }
            }
        }
    })
}