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">&laquo;</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">&raquo;</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">&laquo;</span>

                      </a>

                  </li>

根据当前展示页页码给向前向后翻页添加禁用