现在我们在做之前要明白一点：vue强大之处-----数据驱动和自动刷新
现在我们要做一个这样的作业，包含添加数据，删除数据，编辑数据，对数据进行分页，此功能没有后台，全是前台做的：
第一步：添加数据
增加用户时使用push和unshift方法都可以，前者是把数据添加到数组后边，后者是把数据添加到数组前面：
下面为完整代码，然后再来一一解释
<div class="container" id="box">
<div class="panel panel-primary">
<div class="panel-heading">请添加</div>
<div class="panel-body">
<form>
<div class="form-group">
<label for="exampleInputEmail1">姓名：</label>
<input v-model="username" type="text" name="username " class="form-control" id="exampleInputEmail1" >
</div>
<div class="form-group">
<label for="exampleInputPassword1">学号：</label>
<input v-model="id" type="text" name="id" class="form-control" id="exampleInputPassword1">
</div>
<div class="col-lg-offset-5 col-md-7">
<button type="button" @click="add" class="btn btn-primary">添加</button>
<button type="button" class="btn btn-primary">重置</button>
</div>
</form>
</div>
<br/>
<table class="table table-bordered table-hover">
<caption class="h3 text-info">学生信息表</caption>
<tr class="text-danger">
<th class="text-center">序号</th>
<th class="text-center">名字</th>
<th class="text-center">学号</th>
<th class="text-center">操作</th>
</tr>
<tr class="text-center" v-for="item in subArr">
<td>{{ $index+pageNo*record+1 }}</td>
<td>{{ item.name }}</td>
<td>{{ item.id }}</td>
<td>
<button @click="now=$index+pageNo*record" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer">删除</button>
<button @click="edit($index+pageNo*record)" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#edit">编辑</button>
</td>
</tr>
<tr v-show="arr.length!=0">
<td colspan="4" class="text-center">
<button @click="delAll=true" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#layer">删除全部</button>
</td>
</tr>
<tr v-show="arr.length==0">
<td colspan="4" class="text-center text-muted">
<p>暂无数据....</p>
</td>
</tr>
</table>
<div class="text-center">
<nav aria-label="Page navigation">
<ul class="pagination">
<li v-for="i in pagearr" track-by="$index" :class="pageNo==(i-1)?'active':''">
<a href="#" @click="pageNo=i-1">{{ i }}</a>
</li>
</ul>
</nav>
</div>
</div>
<div role="dialog" class="modal fade bs-example-modal-sm" id="layer">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
</button>
<h4 class="modal-title">{{ delAll?'确认全部删除么？':'确认删除么？'}} </h4>
</div>
<div class="modal-body text-right">
<button data-dismiss="modal" class="btn btn-primary btn-sm" @click="delAll=false">取消</button>
<button data-dismiss="modal" class="btn btn-danger btn-sm" @click="del()">确认</button>
</div>
</div>
</div>
</div>
<div role="dialog" class="modal fade bs-example-modal-sm" id="edit">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
</button>
<h4 class="modal-title">请编辑</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
姓名：<input v-model="selectedlist.name" type="text" name="username " class="form-control" id="username" >
学号：<input v-model="selectedlist.id" type="text" name="id" class="form-control" id="id">
</div>
</form>
</div>
<div class="modal-footer text-right">
<button data-dismiss="modal" class="btn btn-primary btn-sm" @click="selectedlist=[]">取消</button>
<button data-dismiss="modal" class="btn btn-danger btn-sm" @click="edit_true()">编辑</button>
</div>
</div>
</div>
</div>
</div>
<script>
window.onload=function () {
new Vue({
el:"#box",
data:{
username:"",
id:"",
arr:[],
now:-1,
delAll:false,
selectedlist:[],//暂存被选中进行编辑的数据
selectedindex:-1,//记录被选中的index
pageNo:0,
record:3,
pagearr:[],
},
methods:{
add(){
if(this.username=="" || this.id==""){
alert("请输入姓名或学号")
}else{
this.arr.unshift({name:this.username,id:this.id});
this.username="";
this.id="";
this.page();
}
},
del(){
if(this.delAll){
this.arr=[];
this.delAll=false;
this.page();
}else{
this.arr.splice(this.now,1);
if((this.arr.length+1)%this.record==1){
this.pageNo--;
} //当最后一页的最后一条数据被删除时，也要改变当前页面
this.page();
}
},
edit(index){
this.selectedlist=[];
this.selectedindex=index;
this.selectedlist=JSON.parse( JSON.stringify(this.arr[index]) );// 深度拷贝,先转换为字符串，然后再转换
},
edit_true(){
this.arr[this.selectedindex].id=this.selectedlist.id;
this.arr[this.selectedindex].name=this.selectedlist.name;
},
page(){
let pageMax=Math.ceil(this.arr.length/this.record);
this.pagearr=[];
for(let i=1;i<=pageMax;i++){
this.pagearr.push(i);
}
},
},
computed:{
subArr(){
return this.arr.slice(this.pageNo*this.record,(this.pageNo+1)*this.record);
}
},
ready(){
this.arr.unshift({name:'aaa',id:111});
this.arr.unshift({name:'bbb',id:222});
this.arr.unshift({name:'ccc',id:333});
this.arr.unshift({name:'ddd',id:444});
this.arr.unshift({name:'eee',id:555});
this.arr.unshift({name:'fff',id:666});
this.arr.unshift({name:'ggg',id:777});
this.arr.unshift({name:'hhh',id:888});
this.arr.unshift({name:'iii',id:999});
this.page();
}
});
};
</script>
v-show="arr.length!=0",v-show="true"显示，v-show="false"不显示。数据添加使用：
this.arr.unshift({name:this.username,id:this.id});
第二步：删除数据
这里删除数据分为删一条和全部删除，所以引入了一个数据delAll,首先使delAll为false，表示不全部删除。删除一条数据要知道是删除的哪一条，所以点击删除的时候就改变now的值，代表现在在哪一条数据上，然后弹出模态框，点击确定才删除：
this.arr.splice(this.now,1); //splice是用于删除数组中的指定元素，第一个参数是从哪删除的索引，第二个参数是删除的个数
点击全部删除的时候，改变delAll，使它等于true，代表要全部删除：
this.arr=[]; //全部删除就把数组清空 this.delAll=false; //过后把delAll恢复以前的值
以上的删除页面都会自动更新，因为你删除一条，arr数组就少一条，循环的arr的数据就在变。别忘了，vue会自动更新。
第三步：编辑数据
我们想要编辑哪一条数据，就把now传到函数里面去，从arr里面寻找选中的数据，然后声明一个空数组，用于暂存选中的数据，编辑完后就又把数据赋值回arr那一条数据。
edit(index){ this.selectedlist=[]; this.selectedindex=index; this.selectedlist=JSON.parse( JSON.stringify(this.arr[index]) );// 深度拷贝,先转换为字符串，然后再转换 },如果代码是这样：
edit(index){ this.selectedlist=[]; this.selectedindex=index; this.selectedlist=this.arr[index]; },那么就会有一个问题，因为
arr[index]是个Object类型的数据，若使用=赋值，则赋值操作为浅度拷贝（把数据的地址赋值给对应变量，而没有把具体的数据复制给变量，变量会随数据值的变化而变化），selectedlist与list[index]使用相同的数据地址，互相引起数据值的变化。因此这里我们需要进行深度拷贝
如果点击取消
@click="selectedlist=[]"
点击确定
@click="edit_true()"edit_true(){ this.arr[this.selectedindex].id=this.selectedlist.id; this.arr[this.selectedindex].name=this.selectedlist.name; },//把修改完的值再赋值回去
第四步：分页功能
先把页面底部的几页显示出来：
咱们就用一个空数组来存页数，比如有4页，[1,2,3,4],然后循环这个数组，把1,2,3,4，显示出来
page(){ let pageMax=Math.ceil(this.arr.length/this.record); //计算总的页数，注意：前面的所有行为都必须调用此函数 this.pagearr=[]; for(let i=1;i<=pageMax;i++){ this.pagearr.push(i); } },
然后再控制页面显示几条数据，用一个子数组来保存当前页的数据：
computed:{ subArr(){ return this.arr.slice(this.pageNo*this.record,(this.pageNo+1)*this.record); } }, //此刻就要使用vue的计算属性功能了，此计算非常强大，只要data变，就会重新计算，这就是数据驱动
当然，因为有以上的强大功能做铺垫后面就简单了，点击第二页时就改变pageNo,pageNo一变，数据也会跟着变。