vue項目1-pizza點餐系統11-設計menu頁面

菜單的頁面設計是基於bootstrap實現的，主要用到的是table標籤，其中獲取data數據用到遍歷。

<template>
     <div class="">
         <!--col-sm-12小屏幕尺寸佔滿屏  -->
         <div class="col-sm-12">
             <!-- 表格 -->
             <table class="table">
                 <thead class="thead-default">
                     <tr>
                         <th>尺寸</th>
                         <th>價格</th>
                         <th>加入</th>
                     </tr>
                 </thead>
                 <tbody v-for="item in getMenuItems" :key='item.name'>
                     <tr>
                         <td><strong>{{item.name}}</strong></td>
                     </tr>
                     <tr v-for="option in item.options" :key='option.size'>
                         <td>{{option.size}}</td>
                         <td>{{option.price}}</td>
                         <td><button class="btn btn-sm btn-outline-success">+</button></td>
                     </tr>
                 </tbody>
             </table>
         </div>
     </div>
 </template>
 
 <script>
 export default {
   
    data(){
        return{
           getMenuItems:{
               1:{
                   'name': '榴蓮pizza',
                   'description': '喜歡榴蓮的朋友不容錯過',
                   'options': [{
                       'size': 9,
                       'price': 38
                   },
                   {
                       'size': 12,
                       'price': 48
                   }
                   ]
               },
               2:{
                   'name': '芝士pizza',
                   'description': '喜歡芝士的朋友不容錯過',
                   'options': [{
                       'size': 9,
                       'price': 28
                   },
                   {
                       'size': 12,
                       'price': 38
                   }
                   ]
               },
               3:{
                   'name': '辣條pizza',
                   'description': '喜歡辣條的朋友不容錯過',
                   'options': [{
                       'size': 9,
                       'price': 688
                   },
                   {
                       'size': 12,
                       'price': 888
                   }
                   ]
               }
           }
        }
     }