Vue--findIndex方法的使用原理
生活随笔
收集整理的這篇文章主要介紹了
Vue--findIndex方法的使用原理
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
原理：
// 根據id得到下標 // 默認去遍歷list集合，將集合中的每個元素傳入到function的item里， var index = this.list.findIndex(function(item){ //根據item中的id屬性來判斷這個item是否是上面id中 //對應的數據，如果是返回一個true ,否返回false,繼續下面的一條數據的遍歷，以此類推 return item.id ==id; //如果返回true，那么findIndex方法會將這個item對應的id返回到外面接受 });?
實例：
1 <!DOCTYPE html>2 <html lang="en">3 4 <head>5 <meta charset="UTF-8">6 <meta name="viewport" content="width=device-width, initial-scale=1.0">7 <meta http-equiv="X-UA-Compatible" content="ie=edge">8 <title>Document</title>9 <style>10 #app {11 width: 600px;12 margin: 10px auto;13 }14 15 .tb {16 border-collapse: collapse;17 width: 100%;18 }19 20 .tb th {21 background-color: #0094ff;22 color: white;23 }24 25 .tb td,26 .tb th {27 padding: 5px;28 border: 1px solid black;29 text-align: center;30 }31 32 .add {33 padding: 5px;34 border: 1px solid black;35 margin-bottom: 10px;36 }37 </style>38 </head>39 40 <body>41 <div id="app">42 <div class="add">43 編號: <input type="text" v-model="id">品牌名稱: <input v-model="name" type="text">44 <button @click="add">添加</button>45 </div>46 <div class="add">品牌名稱：<input type="text"></div>47 <div>48 <table class="tb">49 <tr>50 <th>編號</th>51 <th>品牌名稱</th>52 <th>創立時間</th>53 <th>操作</th>54 </tr>55 <tr v-if="list.length <= 0">56 <td colspan="4">沒有品牌數據</td>57 </tr>58 <!--加入: key="index" 時候必須把所有參數寫完整 -->59 <tr v-for="(item,key,index) in list" :key="index">60 <td>{{item.id}}</td>61 <td>{{item.name}}</td>62 <td>{{item.ctime}}</td>63 <!-- 使用vue來注冊事件時，我們在dom元素中是看不到的 -->64 <td><a href="javascript:void(0)" @click="del(item.id)">刪除</a></td>65 </tr>66 </table>67 </div>68 69 </div>70 </body>71 72 </html>73 <script src="vue2.4.4.js"></script>74 <script>75 var vm = new Vue({76 el: "#app",77 data: {78 id: 0,79 name: '',80 list: [81 { "id": 1, "name": "it", "ctime": Date() },82 { "id": 2, "name": "白龍", "ctime": Date() }83 ]84 },85 methods: {86 add: function () {87 //將id和namepush到list數組中88 this.list.push({ "id": this.id, "name": this.name, "ctime": Date() });89 },90 del:function(id) {91 92 // 根據id得到下標93 // 默認去遍歷list集合，將集合中的每個元素傳入到function的item里，94 var index = this.list.findIndex(function(item){95 //根據item中的id屬性來判斷這個item是否是上面id中96 //對應的數據，如果是返回一個true ,否返回false,繼續下面的一條數據的遍歷，以此類推97 return item.id ==id; //如果返回true，那么findIndex方法會將這個item對應的id返回到外面接受98 });99 // 根據下標在list集合中將對應的數據刪除 100 // splice(開始刪除的下標，刪除的長度) 101 this.list.splice(index,1); 102 } 103 } 104 }); 105 106 </script>轉載于:https://www.cnblogs.com/TigerZhang-home/p/8962238.html
總結
以上是生活随笔為你收集整理的Vue--findIndex方法的使用原理的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Vue第二章，在项目中使用element
- 下一篇： 基于蚂蚁金服「如何管理好10万行代码」搭