vue基础指令运用遇到的问题及解决方法(vue 模板指令练习demo1)
导读:<!DOCTYPE html> <html...
<!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>品类 :</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">
{{key3+":"+value3}} 
</div>
</div>
<div v-if="key1===pants">
{{ (+(index2+1)+)+、 }}  
<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 }} 
</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>
创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!