<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3.2.31/dist/vue.global.js"></script>
</head>
<body>
   <ul>
       <li v-for="num in 10" :id="'li-'+num">
           {{  num }}
       </li>
   </ul>
   <div v-for="(val,index) in arrList"> {{ 'ID:'+val.id }} &emsp;{{ 'Status:'+val.status }} &emsp;{{ 'Oxygen:'+val.oxygen }}&emsp;{{ 'Shutoff:'+val.shutoff }}&emsp;{{ 'Creator:'+val.creator }}&emsp;{{ 'Index:'+index }} </div>
   <h2>品类 ：</h2>
   <div v-for="(value,key,index) in ObjectSp">
       <span>{{ '编号：'+(index+1) }}</span> &emsp;&emsp;
       <span>{{ '品类：'+key }}</span>
       <h3 >详情 ：</h3>
       <div v-for="(value1,key1,index1) in value" >
              <div v-for="(value2,index2) in value1">
                    <div v-if="key1==='phoneList'||key1==='T-shirt'">
                          {{ '（'+(index2+1)+'）'+'、' }} &emsp;
                         <div v-for="(value3,key3,index3) in value2">
                             {{key3+":"+value3}}&emsp;
                         </div>
                    </div>
                    <div v-if="key1==='pants'">
                        {{ '（'+(index2+1)+'）'+'、' }} &emsp;
                        <div v-for="(value3,key3,index3) in value2">
                            <span v-if="key3==='供应商'"> 
                                {{ key3+':' }}
                                <div v-for="(value4,index4) in value3">
                                    <span v-if="(index4+1)==1">
                                        {{ '①' }}
                                    </span>
                                    <span v-else-if="(index4+1)==2">
                                        {{ '②' }}
                                    </span>
                                     <span v-else>
                                        {{ '③' }}
                                     </span>
                                    {{ value4 }}&emsp;
                                </div>
                            </span>
                            <span v-else> {{key3+":"+value3}}&emsp;</span>
                        </div>
                    </div>
              </div>
       </div>
   </div> 
</body>
<script>
    Vue.createApp({
        data(){
            return{
                arrList:[
                    {id:'12324214',status:'关',oxygen:'20%',shutoff:false,creator:'rmb1'},
                    {id:'12324215',status:'关',oxygen:'10%',shutoff:true,creator:'rmb2'},
                    {id:'12324216',status:'开',oxygen:'32%',shutoff:false,creator:'rmb3'},
                    {id:'12324217',status:'关',oxygen:'19.9%',shutoff:false,creator:'rmb4'}
                ],
                ObjectSp:{
                    '手机':{
                        'phoneList':[
                            {'品类':'iphone1','均价':7888,'保修':'三年联产质保','制造商':'三阳制造商'},
                            {'品类':'iphone2','均价':8888,'保修':'一年联产质保','制造商':'似阳制造商'},
                            {'品类':'iphone3','均价':9888,'保修':'三年联产质保','制造商':'诗阳制造商'},
                            {'品类':'iphone4','均价':10888,'保修':'三年联产质保','制造商':'失阳制造商'},
                            {'品类':'iphone5','均价':11888,'保修':'三年联产质保','制造商':'湿阳制造商'},
                            {'品类':'iphone6','均价':12888,'保修':'三年联产质保','制造商':'狮阳制造商'},
                            {'品类':'iphone7','均价':13888,'保修':'三年联产质保','制造商':'世阳制造商'},
                            {'品类':'iphone8','均价':14888,'保修':'十年联产质保','制造商':'仕阳制造商'}
                        ]
                    },
                    '衣物':{
                       'T-shirt':[
                           {'品牌':'波司登','成分':'鸡绒','制造商代号':980823738748},
                           {'品牌':'ShINE','成分':'鸭绒','制造商代号':980823738749},
                           {'品牌':'POW LOW FASHION','成分':'鹅绒','制造商代号':980823738750},
                           {'品牌':'BIG BEN','成分':'狗绒','制造商代号':980823738751},
                           {'品牌':'REGION','成分':'猫绒','制造商代号':980823738752},
                       ],
                       'pants':[
                           {'品牌':'啄木鸟',size:'A','耗材':'鸡皮','供应商':['上海','吉林','深圳']},
                           {'品牌':'啄木鸟',size:'B','耗材':'鸭皮','供应商':['内蒙','广州','北京']},
                           {'品牌':'啄木鸟',size:'C','耗材':'鹅皮','供应商':['河北','四川','钓鱼岛']},
                           {'品牌':'啄木鸟',size:'D','耗材':'狗皮','供应商':['蚌埠','义乌','四川']},
                           {'品牌':'啄木鸟',size:'A','耗材':'猫皮','供应商':['天津','河南','新疆']},
                           {'品牌':'啄木鸟',size:'D','耗材':'?皮','供应商':['东京','首尔','基辅']},
                       ]
                    }
                }
            }
        }
    }).mount('body')
</script>
</html>
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。