進行添加button，以及商品列表的創建
html:
<div class="form-btn"> <button>確認添加</button> <button>重置信息</button> </div> </div> <!--顯示表格--> <div class="table-warp"> <div class="title">商品列表</div> <table border="1" align="center"> <tr> <th>序號</th> <th>編號</th> <th>名稱</th> <th>價格</th> <th>數量</th> <th>類型</th> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> </div>
在vue代碼中創建方法，以及創建假數據,進行對兩個button事件處理：
添加的vue代碼：
<script> window .onload= () =>{ new Vue({ el:"#container", data:{ imgUrl:'../res/images/', imgName:'lovely.ico', goods:{ id:'', name:'', price:'', num:'', type:'' }, goodsType:['零食','電子產品','生活用品'], goodsArry:[ {id:'001',name:'可樂',price:3.5,num:10,type:'零食'}, {id:'002',name:'GTX2080',price:9999,num:20,type:'電子產品'}, {id:'003',name:'牙刷',price:5,num:30,type:'生活用品'} ] }, methods:{ addGoods(){ this.goodsArry.push(this.goods); this.goods={}; } } }); } </script>
this.goods={}; 表示點擊完確認添加按鈕，添加商品中的數據清空
html:
<div id="container"> <!--logo title--> <div class="header"> <img :src="imgUrl+imgName" class="logo" height="200px" width="200px" style="padding-top: 0px; float: left;"/> <h1 class="title">商品管理</h1> </div> <!--輸入部分input--> <div class="form-warp"> <div class="title">添加商品</div> <div class="content"> 商品編號：<input type="text" placeholder="請輸入商品編號" v-model="goods.id"/><br /> 商品名稱：<input type="text" placeholder="請輸入商品名稱" v-model="goods.name"/><br /> 商品價格：<input type="text" placeholder="請輸入商品價格" v-model="goods.price"/><br /> 商品數量：<input type="text" placeholder="請輸入商品數量" v-model="goods.num"/><br /> 商品類型：<select v-model="goods.type"> <option value="" disabled="disabled">--請選擇--</option> <option v-for="type in goodsType">{{type}}</option> </select> </div> <div class="form-btn"> <button @click="addGoods">確認添加</button> <button @click="goods= { } ">重置信息</button> </div> </div> <!--顯示表格--> <div class="table-warp"> <div class="title">商品列表</div> <table border="1" align="center"> <tr> <th>序號</th> <th>編號</th> <th>名稱</th> <th>價格</th> <th>數量</th> <th>類型</th> </tr> <tr v-for="(item,index) in goodsArry" :key="item.id"> <td>{{index}}</td> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.price}}</td> <td>{{item.num}}</td> <td>{{item.type}}</td> </tr> </table> </div> </div> </body>
實現以上商品的添加以及重置信息總的代碼：
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 width: 1000px; 52 border:2px solid gray; 53 } 54 55 56 </style> 57 </head> 58 <body> 59 <div id="container"> 60 61 <!--logo title--> 62 <div class="header"> 63 <img :src="imgUrl+imgName" class="logo" height="200px" width="200px" style="padding-top: 0px; float: left;"/> 64 <h1 class="title">商品管理</h1> 65 66 </div> 67 68 <!--輸入部分input--> 69 <div class="form-warp"> 70 <div class="title">添加商品</div> 71 <div class="content"> 72 73 商品編號：<input type="text" placeholder="請輸入商品編號" v-model="goods.id"/><br /> 74 商品名稱：<input type="text" placeholder="請輸入商品名稱" v-model="goods.name"/><br /> 75 商品價格：<input type="text" placeholder="請輸入商品價格" v-model="goods.price"/><br /> 76 商品數量：<input type="text" placeholder="請輸入商品數量" v-model="goods.num"/><br /> 77 商品類型：<select v-model="goods.type"> 78 79 <option value="" disabled="disabled">--請選擇--</option> 80 <option v-for="type in goodsType">{{type}}</option> 81 82 </select> 83 84 </div> 85 <div class="form-btn"> 86 <button @click="addGoods">確認添加</button> 87 <button @click="goods= { } ">重置信息</button> 88 89 90 91 </div> 92 93 </div> 94 <!--顯示表格--> 95 <div class="table-warp"> 96 <div class="title">商品列表</div> 97 <table border="1" align="center"> 98 99 <tr> 100 <th>序號</th> 101 <th>編號</th> 102 <th>名稱</th> 103 <th>價格</th> 104 <th>數量</th> 105 <th>類型</th> 106 </tr> 107 <tr v-for="(item,index) in goodsArry" :key="item.id"> 108 <td>{{index}}</td> 109 <td>{{item.id}}</td> 110 <td>{{item.name}}</td> 111 <td>{{item.price}}</td> 112 <td>{{item.num}}</td> 113 <td>{{item.type}}</td> 114 </tr> 115 </table> 116 117 118 119 120 121 </div> 122 123 124 125 126 </div> 127 </body> 128 </html>