<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi ...
<!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/[email protected]/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','耗材':'
