<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>增删改查</title>
<script src="../vue.js/vue.js"></script>
<script>
window.onload=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;
})
}
},
}
})
}
</script>
</head>
<body>
<div id="app">
<h2>数组更新检测</h2>
<ul>
<li>push 追加到末尾</li>
<li>pop 从末尾移除</li>
<li>shift 删除第一个元素</li>
<li>unshift 追加元素到数组的前面</li>
<li>splice 删除指定下标的元素</li>
<li>sore 排序</li>
<li>reverse 翻转</li>
<li>替换新数组 vm.array=newarray;</li>
</ul>
<h1>作业 增删改查</h1>
<p>
姓名：<input type="text">
性别：<input type="text">
<button type="button" @click="addItemsFront(name1,age1)">末尾添加</button>
<button type="button" @click="addItemsEnd(name1,age1)">头部添加</button>
<button type="button" @click="rever()">翻转</button>
<button type="button" @click="acSorts()">按年龄升序</button>
<button type="button" @click="acSortj()">按年龄降序</button>
<button type="button" @click="filterName()">查找</button>
</p>
<table border="1" cellspacing="0" cellpadding="10" style="width: 500px;height: auto;">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(student,index)in result?filterStu:students">
<td>{{index+1}}</td>
<td>{{student.name}}</td>
<td>{{student.age}}</td>
<td><button type="button" @click="del(index)">删除</button></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
