VUE简单的分页购物清单
1.需求分析
image
可以在购物列表中添加、删除数据。添加删除操作会改变分页。
可切换每条数据采购状态，已采购的数据才能从列表中删除。否则删除键不能点击。
头部显示清单总数以及未采购数
2.数据驱动
image
以总数据为核心的数据驱动（添加、删除、选购状态）；
分页以页码为核心，当前页展示条数为必要参数
以下为data
data:{
lists:[{name:'手机1',purchased:false},//所有购物信息 purchased选购状态 false未选购，true选购
{name:'电脑2',purchased:true},
{name:'化妆品3',purchased:false},
{name:'包4',purchased:false},
{name:'电脑5',purchased:true},
{name:'化妆品6',purchased:false},
{name:'包7',purchased:false},
{name:'电脑8',purchased:true},
{name:'化妆品9',purchased:false},
{name:'包10',purchased:false},
{name:'手机11',purchased:false},
{name:'电脑12',purchased:true},
{name:'化妆品13',purchased:false},
{name:'包14',purchased:false},
{name:'电脑15',purchased:true},
{name:'化妆品16',purchased:false},
{name:'包17',purchased:false},
{name:'电脑18',purchased:true}
],
name:"",//添加一条数据所使用的变量
page:{//分页相关变量
total:1,//总分页数
showPageNum:1,//当前展示页码
contentNum:10,//每一页的展示条数
},
3.添加、删除
样式用的全都是bootstrap
添加（html）
<input class="form-control" type="text" v-model="name"/>
<span class="input-group-btn">
<button class="btn btn-primary" v-on:click="add(name)">添加</button>
</span>
</div>
(js)
add:function(name){
if (name ==='')return;
this.lists.unshift({name:name,purchased:false});
this.name="";
this.paging();
}
this.paging();分页，后面会讲，添加、删除操作都会触发重新分页。
删除（html）
<button type="button" class="btn btn-danger btn-sm" @click="del(index)" :disabled="!item.purchased">删除</button>
<tr v-for="(item,index) in showList">******i****tem,index都是在v-for中获取的
@click="del(index)" 删除按钮仅仅负责根据当前数据的index删除对应数据。
:disabled="!item.purchased"根据选购状态设置删除按钮是否禁用（https://segmentfault.com/q/1010000016214238/a-1020000016214311）
image
4.分页
根据信息总数、每页展示页数确定总页数
根据当前展示页的页码，以及总页数确定当前展示页（针对删除数据后页数减少的情况）
paging:function () {//分页
//确定总页数
this.page.total=Math.ceil(this.lists.length/this.page.contentNum);
if(!this.page.total)
{
this.page.total=1;
}
//确定当前展示页数
this.page.showPageNum=this.page.showPageNum>this.page.total?this.page.total:this.page.showPageNum;
}
当前展示页（html）
<table class="table table-striped">
<thead>
<tr>
<th>序号</th>
<th>清单名称</th>
<th>已采购</th>
<th>状态</th>
<th>删除</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in showList">
<td>{{serialNum(index)}}</td>
<td>{{item.name}}</td>
<td><input type="checkbox" v-model="item.purchased" ></td>
<td>{{item.purchased | stateFilter}}</td>
<td><button type="button" class="btn btn-danger btn-sm" @click="del(index)" :disabled="!item.purchased">删除</button></td>
</tr>
</tbody>
</table>
(js)
computed:{
showList:function () {
//确定当前展示页数据
letstart=(this.page.showPageNum-1)*this.page.contentNum;
return this.lists.slice(start,start+this.page.contentNum);
}
}
<tr v-for="(item,index) in showList">当前展示页的数据是总数据的截取，会根据页码、总数据、每页展示数目变化。所以采用计算属性。
{{item.purchased | stateFilter}}根据采购状态，配合过滤器显示
filters:{//过滤器
stateFilter:function(type){return type?"已采购":"未采购"}
},
<td>{{serialNum(index)}}</td>根据本条数据在展示页数据中的位置来给定序号。
serialNum:function (index) {
return index+1+(this.page.showPageNum-1)*this.page.contentNum;
},
5.页码以及翻页
页码（html）
<nav aria-label="Page navigation">
<ul class="pagination">
<li @click="pagePre" :class="{disabled:page.showPageNum<=1}">
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li v-for="index in page.total" @click="pageTurn(index)" :class="{active:index===page.showPageNum}"><a href="#">{{index}}</a></li>
<li @click="pageNext" :class="{disabled:page.showPageNum>=page.total}">
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
(js)
pageTurn:function (index) {//选择页数
this.page.showPageNum=index;
this.paging();
},
pagePre:function () {//向前翻页
if(this.page.showPageNum>1){
this.page.showPageNum--;
}
this.paging();
},
pageNext:function () {//向后翻页
if(this.page.showPageNum<this.page.total){
this.page.showPageNum++;
}
this.paging();
}
<li v-for="index in page.total" @click="pageTurn(index)" :class="{active:index===page.showPageNum}"><a href="#">{{index}}</a></li>
根据当前展示的页码确定拥有active样式的页码。
<li @click="pagePre" :class="{disabled:page.showPageNum<=1}">
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
根据当前展示页页码给向前向后翻页添加禁用
6.为什么添加、删除写了对应的方法修改了总的lists的数据，但是通过勾选修改选购状态没有。
image
如图，修改a[0].name，b[0].name也会对应的修改，因为他们引用的是同一个对象。但是对b的添加删除操作不会影响到a。
<td><input type="checkbox" v-model="item.purchased"></td>v-model动态绑定的purchase就是总数组lists中的purchased
所有代码已经上传到我的github仓库中。
都看到这里了就点个❤吧 (╹▽╹)
