2、前端小案例（一）
用到的知识点：
1、 border-collapse
2、 push
3、splice
1 <style> 2 #app{ 3 width: 700px; 4 margin: 10px auto; 5 } 6 .add{ 7 border: 1px solid #000; 8 margin-bottom: 10px; 9 padding: 5px; 10 } 11 .tb{ 12 border-collapse: collapse; 13 width: 100%; 14 } 15 .tb td, .tb th{ 16 border: 1px solid #000; 17 text-align: center; 18 padding: 5px; 19 } 20 .tb th{ 21 background-color: #0094ff; 22 color: #fff; 23 } 24 </style> 25 <script src="./vue2.js"></script> 26 <div id="app"> 27 <div class="add"> 28 编号：<input type="text" v-model="newId" > 29 品牌名称：<input type="text" v-model="newName" @keyDown.enter="addNewData"> 30 <button @click="addNewData">添加</button> 31 </div> 32 <div class="add"> 33 品牌名称：<input type="text"> 34 </div> 35 <div> 36 <table class="tb"> 37 <tr> 38 <th>编号</td> 39 <th>品牌名称</td> 40 <th>创立时间</td> 41 <th>操作</td> 42 </tr> 43 <tr v-for="(item,index) in list" :key="index"> 44 <td>{{ item.id}}</td> 45 <td>{{ item.name}} </td> 46 <td> {{ item.ctime}} </td> 47 <td> 48 <button @click="delData(index)">删除</button> 49 </td> 50 </tr> 51 </table> 52 </div> 53 </div> 54 <script> 55 var vm = new Vue({ 56 el:"#app", 57 data:{ 58 newId:'', 59 newName:'', 60 list:[ 61 { id: 11, name:'茅台', ctime:new Date()}, 62 { id: 22, name:'衡水老白干', ctime:new Date()}, 63 { id: 33, name:'中华', ctime:new Date()}, 64 { id: 44, name:'玉溪', ctime:new Date()} 65 66 ] 67 }, 68 methods:{ 69 addNewData(){ 70 console.log(this) 71 // this.list.id = newId 72 this.list.push({ id:this.newId, name: this.newName, ctime: new Date()}) 73 this.newId = '' 74 this.newName = '' 75 }, 76 delData(item){ 77 this.list.splice(item,1) 78 } 79 } 80 }) 81 </script>
