vue结合php增删改查实例,用vue.js写一个简单的增删改查

Title

tbody:empty:after {

content: '没有找到';

}

姓名年龄操作

{{item.stuName}}{{item.age}} 修改 删除 添加

var app = new Vue({

el:'#app',

data:{

stuList:[

{stuName:'小牧',age:22},

{ stuName:'小hai',age:32},

{ stuName:'小米',age:12}

],searchName:'',

username:'',

age:'',

index:-1

},

methods:{

del(index) {

this.stuList.splice(index,1)

},

save: function (index) {

if(this.index==-1){

this.addStu()

} else{

this.username=this.stuList[index].stuName

this.age=this.stuList[index].age

}

},

addStu(){

if(this.username.length==0){

alert('请输入用户名');

return

}else if(this.age.length==0){

alert('请输入年龄');

return

}

var age =parseInt(this.age);

if(isNaN(age)){

alert('年龄请输入数字');

return

}

var obj = {stuName: this.username, age: this,age}

this.stuList.push(obj)

this.username=''

this.age=''

},

up(index){

this.index=index

this.username=this.stuList[index].stuName

this.age=this.stuList[index].age

},

edit: function (obj) {

this.rowtemplate = obj;

}

},computed:{

//            getStuListBySearch(){

//                var search =this.searchName;

//                var arr =[];

//                for(var i=0;i

//                    if(this.stuList[i].stuName.indexOf(search)>=0){

//                        arr.push(this.stuList[i])

//                    }

//                }

//                return arr

//            },

getStuListBySearch(){

var search=this.searchName

return  this.stuList.filter(function (item) {

return item.stuName.indexOf(search)>=0

})

}

}

})