用所學過的Vue3.0雙大括號文字插值、條件、迴圈渲染指令、表單資料雙向繫結、計算屬性和事件響應等相關知識，來開發一個小專案，以此達到技術總結的意義。
一個企業想要持續發展，離不開好的產品。產品從研發、生產到銷售，要有一套完整的產品管理系統，才能及時響應客戶的需求，提高市場銷售額。光靠HTML+CSS+Vue3.0，開發一套完整的產品管理系統，是遠遠不夠的，但開發一個小專案，綽綽有餘。
10.2 產品列表頁面佈局，用純天然的HTML+CSS就好了。用插值和計算屬性，輸出產品總數量；用v-for迴圈渲染，輸出產品資訊；用v-if判斷產品規格是否為空；用v-on(縮寫@)進行事件繫結。
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Vue3.0小專案實戰</title> <script src="vue.global.js"></script> <style> h1 { text-align: center; color: darkorange; margin-top: 30px; } .counter { text-align: center; margin-bottom: 5px; } table { width: 800px; margin: 0 auto; text-align: center; } td, th { border: 1px solid #bcbcbc; padding: 5px 10px; } th { background: #42b983; font-size: 1.2rem; font-weight: 400; color: #fff; cursor: pointer; } tr:nth-of-type(odd) { background: #fff; } tr:nth-of-type(even) { background: #eee; } .del { color: red; } input { border: 1px solid darkcyan; line-height: 25px; width: 200px; color: #000; font-weight: bold; margin-top: 5px; margin-left: 10px; } </style></head><body><div id="app"> <h1>產品資訊列表</h1> <div class="counter">共有<strong>{{ counter }}</strong>件產品</div> <table> <thead> <tr> <th>序號</th> <th>名稱</th> <th>型號</th> <th>規格</th> <th>操作</th> </tr> </thead> <template v-for="(product,index) in products" :key="index"> <tr> <td> {{ index + 1 }} </td> <td> {{ product.name }} </td> <td> {{ product.type }} </td> <td> <span v-if="product.desc==''"> 未填寫規格 </span> <span v-else> {{ product.desc }} </span> </td> <td> <button class="del" @click='del(index)'>刪除</button> </td> </tr> </template> </table></div><script> Vue.createApp({ data() { return { product: { name: '', type: '', desc: '', }, products: [ {name: '安卓手機', type: 'AZ321', desc: '6.8寸'}, {name: '蘋果手機', type: 'PG222', desc: '4.8寸'}, {name: '安卓平板', type: 'PB666', desc: '9.8寸'}, {name: '二手電視', type: 'ER659', desc: '12寸'}, {name: '洗衣機', type: 'XY872', desc: '9.8斤'} ] } }, computed: { counter() { return this.products.length } }, methods: { //刪除資料 del(index) { this.products.splice(index, 1) } } }).mount("#app")</script></body></html>輸出結果
10.3 新增產品在新增表單佈局程式碼，實現新增產品功能的佈局。用v-model指令，進行表單資料雙向繫結；用v-on(縮寫@)進行事件繫結。在method裡面新增add函式，進行表單是否為空校驗，不透過就進行提示，透過就將資訊新增到產品資訊列表中。為了你的方便，我給出完整程式碼好了。
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Vue3.0小專案實戰</title> <script src="vue.global.js"></script> <style> h1 { text-align: center; color: darkorange; margin-top: 30px; } .counter { text-align: center; margin-bottom: 5px; } table { width: 800px; margin: 0 auto; text-align: center; } td, th { border: 1px solid #bcbcbc; padding: 5px 10px; } th { background: #42b983; font-size: 1.2rem; font-weight: 400; color: #fff; cursor: pointer; } tr:nth-of-type(odd) { background: #fff; } tr:nth-of-type(even) { background: #eee; } .del { color: red; } input { border: 1px solid darkcyan; line-height: 25px; width: 200px; color: #000; font-weight: bold; margin-top: 5px; margin-left: 10px; } .add { width: 800px; margin: 0 auto; text-align: center; } .addBtn { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 8px 32px; font-size: 16px; margin-right: 10px; } </style></head><body><div id="app"> <h1>產品資訊列表</h1> <div class="counter">共有<strong>{{ counter }}</strong>件產品</div> <table> <thead> <tr> <th>序號</th> <th>名稱</th> <th>型號</th> <th>規格</th> <th>操作</th> </tr> </thead> <template v-for="(product,index) in products" :key="index"> <tr> <td> {{ index + 1 }} </td> <td> {{ product.name }} </td> <td> {{ product.type }} </td> <td> <span v-if="product.desc==''"> 未填寫規格 </span> <span v-else> {{ product.desc }} </span> </td> <td> <button class="del" @click='del(index)'>刪除</button> </td> </tr> </template> </table> <div class="add"> <h1>新增產品資訊</h1> <div style="margin-left: 10px"> 名稱:<input name="name" type="text" v-model="product.name" placeholder="請輸入產品名稱"/><br/> 型號:<input name="type" type="text" v-model="product.type" placeholder="請輸入產品型號"/><br/> 規格:<input name="desc" type="text" v-model="product.desc" placeholder="請輸入產品規格"/> </div> <br/> <button class="addBtn" type="submit" @click="add()">提交</button> </div></div><script> Vue.createApp({ data() { return { product: { name: '', type: '', desc: '', }, products: [ {name: '安卓手機', type: 'AZ321', desc: '6.8寸'}, {name: '蘋果手機', type: 'PG222', desc: '4.8寸'}, {name: '安卓平板', type: 'PB666', desc: '9.8寸'}, {name: '二手電視', type: 'ER659', desc: '12寸'}, {name: '洗衣機', type: 'XY872', desc: '9.8斤'} ] } }, computed: { counter() { return this.products.length } }, methods: { //刪除資料 del(index) { this.products.splice(index, 1) }, add() { if (this.product.name.trim() == '') { alert('產品名稱不可為空，請輸入.') } else if (this.product.type.trim() == '') { alert('產品型號不可為空，請輸入.') } else { this.products.push(this.product) this.product = {} } } } }).mount("#app")</script></body></html>輸出結果
#前端##Vue.js##JavaScript##程式設計師##Web#
最新評論