首页IT科技vue基础指令运用遇到的问题及解决方法(vue 模板指令练习demo1)

vue基础指令运用遇到的问题及解决方法(vue 模板指令练习demo1)

时间2025-07-05 17:45:26分类IT科技浏览4568
导读:<!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 }} &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>

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
python数据绑定(python方法的绑定和未绑定) javaScript打开哔哩哔哩(javascript DAY 02)