vue动态数据交互+过滤器demo

动态数据交互+过滤器demo

网络请求：axios  

window.onload=function(){
//	var vm=new Vue(...)
	new Vue({
		el:'#my',		
		data:{
			name:112
			lists:[
				/*{'name':'包包','state':'未采购'},
				{'name':'衣服','state':'已采购'},
				{'name':'手机','state':'未采购'}*/
			]
		},
		mounted:function(){
			this.getList();
		}
		methods:{
			add:function(){
				if(this.name=="") return;
				this.lists.unshift({
					{name:this.name,state:'未采购'}
				});
				this.name='';
			},
			del:function(i){
				this.lists.splice(i,1);				
			},
			getList:function(){
				//如果用了var vm=new Vue()这里可以注释
				var self=this;
				axios({
					method:'get',
					url:'这里填写接口地址',					
				}).then(function(res){
					console.log(res);
					if(res.data.code=='200'){
						if(res.data.result && res.data.result.length>0){
								self.lists=res.data.result;
						}
					}
					
				}).catch(function(error){
					console.log(error)
				})
			}
		},
		filters:{//过滤器
			stateFilter:function(type){
				if(type=='未采购'){
					return "商品未采购";
				}else if(type=="已采购"){
					return "商品已经采购，等待发货";
				}else{
					return type;
				}
			}
		}
	})
	
}