学习Vue 入门到实战——学习笔记（二） - 好文

闲聊：


哈哈哈！过了好几天才更新博客啦，嘻嘻，马上过年了，大家最近是不是都开心的快飞起来了，小颖好几个朋友公司都已经放假了，可是我们公司要等到腊月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"> <
divclass="panel-heading">添加、删除、查询</div> <div class="panel-body form-inline"> <
divclass="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, 1); }
3.查询：

这时需要把html中的 tbody 内的代码改为：
<tbody> <tr v-for="item in search(keywords)"> <td>{{item.id}}</td> <td>
{{item.name}}</td> <td>{{item.ctime}}</td> <td><a @click.prevent="del(item.id)">
删除</a></td> </tr> </tbody>
js
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; } }) }
快过年啦，能不能给小颖个小红包呢，嘻嘻，求点赞，求打赏哦！谢谢啦

热门工具换一换