最终修改的页面效果：
修改的css：
<style> #container{ margin: 0 auto; text-align: center; 1000px; border:2px solid gray; } .header{ margin: 10px; border: 1px solid gray; } .header .title{ color: rgb(53,73,93); background: rgb(65,184,131); } .sub_title{ background:rgb(53,73,93); color: rgb(65,184,131); font-size: 30px; } .form-warp{ margin: 10px; padding-bottom: 10px; border: 1px solid gray; } .form-warp .content{ line-height: 35px; } .form-warp input{ 150px; height: 18px; } .form-warp select{ 154px; height: 24px; } .table-warp{ padding-bottom: 10px; margin: 10px; border: 1px solid gray; } .table-warp th{ 80px; color: #ffff; background: rgb(53,73,93); } .logo { position: relative; top: 12px; } </style>
将 商品列表 和 添加商品 标题的class改为sub_title
总的代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>商品管理------创建页面与部分数据</title> 6 <script src="../js/vue.js"></script> 7 8 <script> 9 10 11 window .onload= () =>{ 12 new Vue({ 13 el:"#container", 14 data:{ 15 imgUrl:'../res/images/', 16 imgName:'lovely.ico', 17 goods:{ 18 id:'', 19 name:'', 20 price:'', 21 num:'', 22 type:'' 23 }, 24 goodsType:['零食','电子产品','生活用品'], 25 goodsArry:[ 26 {id:'001',name:'可乐',price:3.5,num:10,type:'零食'}, 27 {id:'002',name:'GTX2080',price:9999,num:20,type:'电子产品'}, 28 {id:'003',name:'牙刷',price:5,num:30,type:'生活用品'} 29 30 ] 31 32 33 34 }, 35 methods:{ 36 addGoods(){ 37 38 this.goodsArry.push(this.goods); 39 this.goods={}; 40 } 41 42 43 } 44 }); 45 } 46 </script> 47 <style> 48 #container{ 49 margin: 0 auto; 50 text-align: center; 51 1000px; 52 border:2px solid gray; 53 } 54 55 .header{ 56 57 margin: 10px; 58 border: 1px solid gray; 59 } 60 61 62 .header .title{ 63 64 color: rgb(53,73,93); 65 background: rgb(65,184,131); 66 } 67 .sub_title{ 68 background:rgb(53,73,93); 69 color: rgb(65,184,131); 70 font-size: 30px; 71 } 72 .form-warp{ 73 margin: 10px; 74 padding-bottom: 10px; 75 border: 1px solid gray; 76 77 } 78 .form-warp .content{ 79 80 81 line-height: 35px; 82 } 83 84 .form-warp input{ 85 150px; 86 height: 18px; 87 88 } 89 90 .form-warp select{ 91 154px; 92 height: 24px; 93 } 94 95 .table-warp{ 96 padding-bottom: 10px; 97 margin: 10px; 98 border: 1px solid gray; 99 } 100 .table-warp th{ 101 80px; 102 color: #ffff; 103 background: rgb(53,73,93); 104 } 105 106 .logo 107 { 108 position: relative; 109 top: 12px; 110 } 111 112 113 </style> 114 </head> 115 <body> 116 <div id="container"> 117 118 <!--logo title--> 119 <div class="header"> 120 <img :src="imgUrl+imgName" class="logo" height="80px" width="100px" /> 121 <h1 class="title">商品管理</h1> 122 123 </div> 124 125 <!--输入部分input--> 126 <div class="form-warp"> 127 <div class="sub_title">添加商品</div> 128 <div class="content"> 129 130 商品编号：<input type="text" placeholder="请输入商品编号" v-model="goods.id"/><br /> 131 商品名称：<input type="text" placeholder="请输入商品名称" v-model="goods.name"/><br /> 132 商品价格：<input type="text" placeholder="请输入商品价格" v-model="goods.price"/><br /> 133 商品数量：<input type="text" placeholder="请输入商品数量" v-model="goods.num"/><br /> 134 商品类型：<select v-model="goods.type"> 135 136 <option value="" disabled="disabled">--请选择--</option> 137 <option v-for="type in goodsType">{{type}}</option> 138 139 </select> 140 141 </div> 142 <div class="form-btn"> 143 <button @click="addGoods">确认添加</button> 144 <button @click="goods= { } ">重置信息</button> 145 146 147 148 </div> 149 150 </div> 151 <!--显示表格--> 152 <div class="table-warp"> 153 <div class="sub_title">商品列表</div> 154 <table border="1" align="center"> 155 156 <tr> 157 <th>序号</th> 158 <th>编号</th> 159 <th>名称</th> 160 <th>价格</th> 161 <th>数量</th> 162 <th>类型</th> 163 </tr> 164 <tr v-for="(item,index) in goodsArry" :key="item.id"> 165 <td>{{index}}</td> 166 <td>{{item.id}}</td> 167 <td>{{item.name}}</td> 168 <td>{{item.price}}</td> 169 <td>{{item.num}}</td> 170 <td>{{item.type}}</td> 171 </tr> 172 </table> 173 174 175 176 177 178 </div> 179 180 181 182 183 </div> 184 </body> 185 </html>