閑聊：
哈哈哈！過了好幾天才更新博客啦，嘻嘻，馬上過年了，大家最近是不是都開心的快飛起來了，小穎好幾個朋友公司都已經放假了，可是我們公司要等到臘月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, 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; } }) }
快過年啦，能不能給小穎個小紅包呢，嘻嘻，求點贊，求打賞哦！謝謝啦
