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 <title>Document</title> 8 <!--1.导入Vue的包--> 9 <script src=" https://cdn.jsdelivr.net/npm/vue"></script> 10 <!-- <link rel="stylesheet" href="./lib/bootstrap.css"> --> 11 <link rel="stylesheet" href=" https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"> 12 <!-- 需要用到Jquery吗？？？不推荐在vue中使用Jquery --> 13 </head> 14 15 <body> 16 <div id="app"> 17 18 <div class="panel panel-primary"> 19 <div class="panel-heading"> 20 <h3 class="panel-title">添加品牌</h3> 21 </div> 22 <div class="panel-body form-inline"> 23 <label> 24 Id: 25 <input type="text" class="form-control" v-model="id"> 26 </label> 27 28 <label> 29 Name: 30 <input type="text" class="form-control" v-model="name"> 31 </label> 32 <!-- 在vue中，使用事件绑定机制，为元素指定处理函数的时候，如果加了小括号，就可以给函数传参了 --> 33 <input type="button" value="添加" class="btn btn-primary" @click="add()"> 34 35 </div> 36 </div> 37 38 39 40 <table class="table table-bordered table-hover table-striped"> 41 <thead> 42 <tr> 43 <th>Id</th> 44 <th>Name</th> 45 <th>Ctime</th> 46 <th>Operation</th> 47 </tr> 48 </thead> 49 <tbody> 50 <tr v-for="item in list" :key="item.id"> 51 <td>{{item.id}}</td> 52 <td v-text="item.name"></td> 53 <td>{{item.ctime}}</td> 54 <td> 55 <a href="" @click.prevent="del(item.id)">删除</a> 56 </td> 57 </tr> 58 </tbody> 59 </table> 60 61 62 </div> 63 64 65 <script> 66 //创建 Vue 实例，得到 ViewModel 67 var vm = new Vue({ 68 el:'#app', 69 data:{ 70 id:'', 71 name:'', 72 list:[ 73 {id:1,name:'奔驰',ctime:new Date()}, 74 {id:2,name:'宝马',ctime:new Date()} 75 ] 76 }, 77 methods:{ 78 add(){//添加的方法 79 // console.log('ok') 80 //分析： 81 //1.获取到id 和name ，直接从data上面获取 82 //2.组织出一个对象 83 //3.把这个对下，调用数组的相关方法，添加到当前data上的list中 84 //4.注意：在Vue中，已经实现了数据的双向绑定，每当我们修改了data中的数据，Vue会默认监听到数据的改动，自动把最新的数据，应用到页面上； 85 //5.当我们意识到上面的第四部的时候，就证明大家已经入门Vue了，我们更多的是在进行VM中Model数据操作，同时，在操作Model数据的时候，指定的业务逻辑操作； 86 87 var car={id:this.id,name:this.name,ctime:new Date()} 88 this.list.push(car) 89 this.id=this.name='' 90 }, 91 del(id){//根据Id删除数据 92 //分析： 93 //1.如何根据Id，找到要删除这一项的索引 94 //2.如果找到索引了，直接调用数组的splice方法 95 96 /* this.list.some((item,i)=>{ 97 if(item.id==id){ 98 this.list.splice(i,1) 99 //在数组的some方法中，如果return true,就会立即终止这个数组的后续循环 100 return true; 101 } 102 })*/ 103 104 var index = this.list.findIndex(item=>{ 105 if(item.id==id){ 106 return true; 107 } 108 }) 109 // console.log(index) 110 this.list.splice(index,1) 111 } 112 } 113 }); 114 </script> 115 </body> 116 </html>