品牌管理案例
(1)bootstrip快速布局
<div class="app"> <div class="panel panel-primary"> <div class="panel-heading"> <h2>品牌管理</h2> </div> <div class="panel-body form-inline"> <label for="">id:<input type="text" class="form-control" v-model="id"></label> <label for="">品牌名称:<input type="text" class="form-control" v-model="name"></label> <input type="button" value="添加" class="btn btn-primary" @click="add"> </div> </div> <table class="table table-bordered table-hover"> <thead> <tr> <th>id</th> <th>品牌名称</th> <th>添加时间</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="item in arr" :key="item.id"> <td v-text="item.id"></td> <td v-text="item.name"></td> <td v-text="item.time"></td> <td><a href="" @click.prevent="del(item.id)">删除</a></td> </tr> </tbody> </table> </div>
(2)业务逻辑的实现
<script> var vm= new Vue({ //创建vue实例 el:'.app', data:{ arr:[ {'id':1,'name':'iPhone','time':new Date()}, {'id':2,'name':'华为','time':new Date()}, {'id':3,'name':'OPPO','time':new Date()} ], //创建一些初始数据与格式 id:'', name:'' }, methods:{ add(){ this.arr.push({'id':this.id,'name':this.name,'time':new Date()}); this.id=this.name=''; },//add方法实现列表的输入功能 del(id){ var index=this.arr.findIndex(item => { if(item.id==id) { return true; } }) this.arr.splice(index,1) //findIndex方法查找索引实现列表的删除功能 // this.arr.some((item,i) => { // if (item.id===id) { // this.arr.splice(i,1) // return true; // } // })//some方法查找索引实现列表的删除功能 } } }) </script> </body> </html>
(3)两种查找索引的方式
在实现删除列表项的功能时,使用splice(从何开始,删除几个,插入项)方法,因此从何开始(index)需要我们把它揪出来。
第一种方法使用some()函数遍历数组,通过回调函数设置判断条件,当条件成立即索引对应成立时执行删除操作,终止循环。
第二种方法使用findIndex()方法直接获取索引,同样是在回调函数中进行判断,当条件成立(item.id==id)时,拿到索引,使用splice()删除列表项。