vue php 增删改查,Vue.js 增删改查

数组更新检测

window.οnlοad=function(){

let vue=new Vue({

el:'#app',

data:{

students:[

{name:'sonia',age:26},

{name:'sss',age:23},

{name:'vvv',age:33},

{name:'aaa',age:18}

],

name1:'',

age1:'',

keyWords:'',

result:false,

filterStu:[],

},

methods:{

addItemsFront(name1,age1){

if(name1==''||age1==''){

return;

}

this.students.push({name:name1,age:age1});

this.name1='';

this.age1='';

},

addItemsEnd(name1,age1){

if(name1==''||age1==''){

return;

}

this.students.unshift({name:name1,age:age1});

this.name1='';

this.age1='';

},

//删除

del(i){

this.students.splice(i,1);

},

//翻转

//翻转

rever(){

this.students.reverse();

},

//升序

acSorts() {

this.students.sort(function (a,b) {

return a.age-b.age;

});

},

//降序

acSortj() {

this.students.sort(function (a,b) {

return b.age-a.age;

});

},

//过滤

filterName(){

var _keyWords=this.keyWords;

if(_keyWords==''){

this.result=false;

}else{

this.result=true;

this.filterStu=this.students.filter(function (value) {

return value.name.indexOf(_keyWords)!=-1;

})

}

},

}

})

}

数组更新检测

• push 追加到末尾
• pop 从末尾移除
• shift 删除第一个元素
• unshift 追加元素到数组的前面
• splice 删除指定下标的元素
• sore 排序
• reverse 翻转
• 替换新数组 vm.array=newarray;

作业 增删改查

姓名：

性别：

末尾添加

头部添加

翻转

按年龄升序

按年龄降序

查找

#姓名性别操作

{{index+1}}{{student.name}}{{student.age}}删除