# 簡單語法呈現大量資料於畫面上 (1-3) ###### tags: `Vue`、`1. 快速入門 Vue.js ` 2022.2.28 * v-for="item in 陣列" * v-bine:class = "{'css語法':true}" //運用v-bine{} 實現判斷 ``` <!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <script src="https://unpkg.com/vue@3"></script> </head> <body> <div id="app"> <!-- ##########################訂單呈現######################## --> <table class="table"> <thead> <tr> <th>標題</th> <th>圖片</th> <th>銷售狀態</th> <th>編輯</th> </tr> </thead> <tbody> <!-- :key 補上唯一值 --> <tr v-for="item in products" :key="item.id" v-bind:class="{ 'table-success': item.onStock}"> <td>{{ item.name }}</td> <td><img v-bind:src="item.imageUrl" alt="" width="100"></td> <td><input type="checkbox" v-model="item.onStock"></td> <td><button type="button" class="btn btn-outline-primary">編輯</button></td> </tr> </tbody> </table> <!-- ##################################################### --> <!-- ##############新增、修改訂單 ############################--> <form> <div class="mb-3"> <label for="productName" class="form-label">產品名稱</label> <input type="text" id="productName" class="form-control" v-model="temp.name" > </div> <div class="mb-3"> <img :src="temp.imageUrl" class="img-fluid d-block" alt="" width="300"> <label for="productImage" class="form-label">產品圖片</label> <input type="text" id="productImage" class="form-control" v-model="temp.imageUrl" > </div> <button type="button" class="btn btn-secondary" v-on:click="confirmEdit">更新</button> </form> <!-- ##################################################### --> </div> <script> const products = [{ id: '1', imageUrl: 'https://images.unsplash.com/photo-1516906571665-49af58989c4e?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=300&q=80', name: 'MacBook Pro', onStock: false, },{ id: '2', imageUrl: 'https://images.unsplash.com/photo-1512499617640-c74ae3a79d37?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80', name: 'iPhone', onStock: false, }]; const App={ data(){ return{ products:[], temp:{ name:'Oldmoon', imageUrl:'https://images.unsplash.com/photo-1602526430780-782d6b1783fa?ixid=MXwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80' } } }, methods:{ confirmEdit(){ this.temp.id = new Date().getTime(); //新增流水號(為了與products格式一致) this.temp.onStock = false; //(為了與products格式一致) this.products.push(this.temp); //將temp(輸入資料)新增至product this.temp = {}; //清空temp } }, created(){ this.products = products; //引入product資料 } } Vue.createApp(App).mount("#app"); </script> </body> <link rel="stylesheet" href="/stylesheets/all.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> </html> ```