- A+
所属分类：Web前端
<!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 }}  {{ 'Status:'+val.status }}  {{ 'Oxygen:'+val.oxygen }} {{ 'Shutoff:'+val.shutoff }} {{ 'Creator:'+val.creator }} {{ 'Index:'+index }} </div> <h2 style="display: inline-block;">品类 ：</h2> <div v-for="(value,key,index) in ObjectSp"> <span>{{ '编号：'+(index+1) }}</span>    <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)+'）'+'、' }}   <div v-for="(value3,key3,index3) in value2" style="display: inline-block;"> {{key3+":"+value3}}  </div> </div> <div v-if="key1==='pants'"> {{ '（'+(index2+1)+'）'+'、' }}   <div v-for="(value3,key3,index3) in value2" style="display: inline-block;"> <span v-if="key3==='供应商'"> {{ key3+':' }} <div v-for="(value4,index4) in value3" style="display: inline-block;"> <span v-if="(index4+1)==1"> {{ '①' }} </span> <span v-else-if="(index4+1)==2"> {{ '②' }} </span> <span v-else> {{ '③' }} </span> {{ value4 }}  </div> </span> <span v-else> {{key3+":"+value3}} </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> 
