1.需求分析
可以在購物列表中添加吼具、刪除數(shù)據(jù)。添加刪除操作會改變分頁从橘。
可切換每條數(shù)據(jù)采購狀態(tài)念赶，已采購的數(shù)據(jù)才能從列表中刪除础钠。否則刪除鍵不能點擊。
頭部顯示清單總數(shù)以及未采購數(shù)
2.數(shù)據(jù)驅(qū)動
以總數(shù)據(jù)為核心的數(shù)據(jù)驅(qū)動（添加晶乔、刪除、選購狀態(tài)）牺勾；
分頁以頁碼為核心正罢，當(dāng)前頁展示條數(shù)為必要參數(shù)
以下為data
data:{
lists:[{name:'手機(jī)1',purchased:false},//所有購物信息 purchased選購狀態(tài) 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:'手機(jī)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:"",//添加一條數(shù)據(jù)所使用的變量
page:{//分頁相關(guān)變量
total:1,//總分頁數(shù)
showPageNum:1,//當(dāng)前展示頁碼
contentNum:10,//每一頁的展示條數(shù)
},
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();分頁翻具，后面會講，添加回还、刪除操作都會觸發(fā)重新分頁裆泳。
刪除（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)" 刪除按鈕僅僅負(fù)責(zé)根據(jù)當(dāng)前數(shù)據(jù)的index刪除對應(yīng)數(shù)據(jù)。
:disabled="!item.purchased"根據(jù)選購狀態(tài)設(shè)置刪除按鈕是否禁用（https://segmentfault.com/q/1010000016214238/a-1020000016214311）
4.分頁
根據(jù)信息總數(shù)柠硕、每頁展示頁數(shù)確定總頁數(shù)
根據(jù)當(dāng)前展示頁的頁碼工禾，以及總頁數(shù)確定當(dāng)前展示頁（針對刪除數(shù)據(jù)后頁數(shù)減少的情況）
paging:function () {//分頁
//確定總頁數(shù)
this.page.total=Math.ceil(this.lists.length/this.page.contentNum);
if(!this.page.total)
{
this.page.total=1;
}
//確定當(dāng)前展示頁數(shù)
this.page.showPageNum=this.page.showPageNum>this.page.total?this.page.total:this.page.showPageNum;
}
當(dāng)前展示頁（html）
<table class="table table-striped">
<thead>
<tr>
<th>序號</th>
<th>清單名稱</th>
<th>已采購</th>
<th>狀態(tài)</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 () {
//確定當(dāng)前展示頁數(shù)據(jù)
letstart=(this.page.showPageNum-1)*this.page.contentNum;
return this.lists.slice(start,start+this.page.contentNum);
}
}
<tr v-for="(item,index) in showList">當(dāng)前展示頁的數(shù)據(jù)是總數(shù)據(jù)的截取，會根據(jù)頁碼蝗柔、總數(shù)據(jù)闻葵、每頁展示數(shù)目變化。所以采用計算屬性癣丧。
{{item.purchased | stateFilter}}根據(jù)采購狀態(tài)槽畔，配合過濾器顯示
filters:{//過濾器
stateFilter:function(type){return type?"已采購":"未采購"}
},
<td>{{serialNum(index)}}</td>根據(jù)本條數(shù)據(jù)在展示頁數(shù)據(jù)中的位置來給定序號。
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) {//選擇頁數(shù)
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>
根據(jù)當(dāng)前展示的頁碼確定擁有active樣式的頁碼胁编。
<li @click="pagePre" :class="{disabled:page.showPageNum<=1}">
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
根據(jù)當(dāng)前展示頁頁碼給向前向后翻頁添加禁用
6.為什么添加厢钧、刪除寫了對應(yīng)的方法修改了總的lists的數(shù)據(jù)，但是通過勾選修改選購狀態(tài)沒有嬉橙。
如圖早直，修改a[0].name，b[0].name也會對應(yīng)的修改市框，因為他們引用的是同一個對象莽鸿。但是對b的添加刪除操作不會影響到a。
<td><input type="checkbox" v-model="item.purchased"></td>v-model動態(tài)綁定的purchase就是總數(shù)組lists中的purchased
所有代碼已經(jīng)上傳到我的github倉庫中拾给。
都看到這里了就點個?吧 (?▽?)
