vue 模板指令练习demo1

 <!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 style="display: inline-block;">品类 ：</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" style="display: inline-block;">

                             {{key3+":"+value3}}&emsp;

                         </div>

                    </div>

                    <div v-if="key1==='pants'">

                        {{ '（'+(index2+1)+'）'+'、' }} &emsp;

                        <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 }}&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>

标签: Javascript

添加新评论