闲聊：
哈哈哈！过了好几天才更新博客啦，嘻嘻，马上过年了，大家最近是不是都开心的快飞起来了，小颖好几个朋友公司都已经放假了，可是我们公司要等到腊月29上完班才给放假，哎！心情不美气的很，用我之前大学舍友的话就是心情疼的很！！！！！，不知道大家都为过年准备了什么？或者有什么所期望的呢？准备：小颖准备减肥哈哈哈，这几天每天下班后坚持去舞蹈教室跟着老师学《和我交往吧》，舞蹈很萌很可爱，奈何我这糙汉子的内心，表现不出来那种萌的感觉，老师说跳这支舞蹈的时候，就要让人产生那种想要把你抱走的感觉，可是我感觉我跳的时候简直是辣眼睛啊，不过后期学完了，小颖想录个视频，也算是给自己一个交代吧，毕竟花了那么多钱学了那么久，嘻嘻，钱不能浪费；期望：小颖期望过完年后，不要长胖，毕竟过年就是各种吃，在自己家吃，在亲戚家吃·················想想都好开心哈哈哈哈。最后呢小颖提前祝大家：新年快乐，猪年大吉！
内容：
今天给大家分享下：实现对vue的data属性中的数据进行：增加、删除、查询操作。
前期准备：vue.jsbootstrap.min.css。
效果图：
公用代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue测试</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/vue.js"></script> <style> .table-content { padding-top: 20px; } .table-content a, .table-content a:hover { cursor: default; text-decoration: none; } </style> </head> <body> <div id="app"> <div class="panel panel-primary"> <div class="panel-heading">添加、删除、查询</div> <div class="panel-body form-inline"> <div class="form-group"> <label for="exampleInputId">Id：</label> <input type="text" class="form-control" id="exampleInputId" v-model="id"> </div> <div class="form-group"> <label for="exampleInputName">Name：</label> <input type="text" class="form-control" id="exampleInputName" v-model="name"> </div> <button type="submit" class="btn btn-primary" @click="add">添加</button> <div class="form-group"> <label for="searchName">搜索名称关键字：</label> <input type="text" class="form-control" id="searchName" v-model="keywords"> </div> </div> </div> <div class="table-content"> <table class="table table-striped table-bordered table-hover"> <thead> <tr> <th>Id</th> <th>Name</th> <th>Ctime</th> <th>operation</th> </tr> </thead> <tbody> <tr v-for="item in user"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.ctime}}</td> <td><a @click.prevent="del(item.id)">删除</a></td> </tr> </tbody> </table> </div> </div> <script> var vm = new Vue({ el: '#app', data: { id: '', name: '', keywords: '', user: [{ id: '1', name: '李琪琪', ctime: new Date() }, { id: '2', name: '小颖颖', ctime: new Date() }, { id: '3', name: '大黑熊', ctime: new Date() }] }, methods: {} }); </script> </body> </html>
在 methods 属性中添加以下代码：
1.增加：
add() { this.user.push({id: this.id, name: this.name, ctime: new Date()}); this.id = ''; this.name = ''; }
2.删除：
del(id) { //在数组的some方法中，如果return true,就会立即终止对这个歌数组的循环。 // this.user.some((item, i) => { // if (item.id == id) { // this.user.splice(i, 1); // return true; // } // }); var index = this.user.findIndex(item => { if (item.id == id) { return true; } }); this.user.splice(index); }
3.查询：
search(keywords) { // var newList = []; // this.user.forEach(item => { // if (item.name.indexOf(keywords) != -1) { // newList.push(item); // } // }); // return newList; return this.user.filter(item => { if (item.name.includes(keywords)) { return item; } }) }
快过年啦，能不能给小颖个小红包呢，嘻嘻，求点赞，求打赏哦！谢谢啦