vue项目1-pizza点餐系统11-设计menu页面

Posted 2020-11-09 兄弟，来啦！

菜单的页面设计是基于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
                   }
                   ]
               }
           }
        }
     }