草庐IT

vue 模板指令练习demo1

Thantics 2023-03-28 原文
<!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>

有关vue 模板指令练习demo1的更多相关文章

  1. ruby - 通过 erb 模板输出 ruby​​ 数组 - 2

    我正在使用puppet为ruby​​程序提供一组常量。我需要提供一组主机名,我的程序将对其进行迭代。在我之前使用的bash脚本中,我只是将它作为一个puppet变量hosts=>"host1,host2"我将其提供给bash脚本作为HOSTS=显然这对ruby​​不太适用——我需要它的格式hosts=["host1","host2"]自从phosts和putsmy_array.inspect提供输出["host1","host2"]我希望使用其中之一。不幸的是,我终其一生都无法弄清楚如何让它发挥作用。我尝试了以下各项:我发现某处他们指出我需要在函数调用前放置“function_”……这

  2. ruby-on-rails - Mandrill API 模板 - 2

    我正在使用Mandrill的RubyAPIGem并使用以下简单的测试模板:testastic按照Heroku指南中的示例,我有以下Ruby代码:require'mandrill'm=Mandrill::API.newrendered=m.templates.render'test-template',[{:header=>'someheadertext',:main_section=>'Themaincontentblock',:footer=>'asdf'}]mail(:to=>"JaysonLane",:subject=>"TestEmail")do|format|format.h

  3. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  4. 牛客网专项练习30天Pytnon篇第02天 - 2

    1.在Python3中,下列关于数学运算结果正确的是:(B)a=10b=3print(a//b)print(a%b)print(a/b)A.3,3,3.3333...B.3,1,3.3333...C.3.3333...,3.3333...,3D.3.3333...,1,3.3333...解析:    在Python中,//表示地板除(向下取整),%表示取余,/表示除(Python2向下取整返回3)2.如下程序Python2会打印多少个数:(D)k=1000whilek>1:    print(k)k=k/2A.1000 B.10C.11D.9解析:    按照题意每次循环K/2,直到K值小于等

  5. ruby - Chef Ruby 遍历 .erb 模板文件中的属性 - 2

    所以这可能有点令人困惑,但请耐心等待。简而言之,我想遍历具有特定键值的所有属性,然后如果值不为空,则将它们插入到模板中。这是我的代码:属性:#===DefaultfileConfigurations#default['elasticsearch']['default']['ES_USER']=''default['elasticsearch']['default']['ES_GROUP']=''default['elasticsearch']['default']['ES_HEAP_SIZE']=''default['elasticsearch']['default']['MAX_OP

  6. ruby - 如何通过Middleman安装和使用Slim模板引擎 - 2

    一般来说,我是Middleman和ruby​​的新手。我已经安装了Ruby我已经安装了Middleman和gem以使其运行。我需要使用slim而不是默认的模板系统。所以我安装了Slimgem。Slim的网站只说我需要'slim'才能让它工作。中间人网站说我只需要在config.rb文件中添加模板引擎,但是没有给出例子...对于没有ruby​​背景的人来说,这没有帮助。我在git上找了几个config.rb,它们都有:require'slim'和#Setslim-langoutputstyleSlim::Engine.set_default_options:pretty=>true#Se

  7. iNFTnews | 周杰伦18年前未发布的作品Demo,藏在了区块链技术里 - 2

    当音乐碰上区块链技术,会擦出怎样的火花?或许周杰伦已经给了我们答案。8月29日下午,B站独家首发周杰伦限定珍藏Demo独家访谈VCR,周杰伦在VCR里分享了《晴天》《青花瓷》《搁浅》《爱在西元前》四首经典歌曲Demo背后的创作故事,并首次公布18年前未发布的神秘作品《纽约地铁》的Demo。在VCR中,方文山和杰威尔音乐提及到“多亏了区块链技术,现在我们可以将这些Demos,变成独一无二具有收藏价值的艺术品,这些Demos可以在薄盒(国内数藏平台)上听到。”如何将音乐与区块链技术相结合,薄盒方面称:“薄盒作为区块链技术服务方,打破传统对于区块链技术只能作为数字收藏的理解。聚焦于区块链技术赋能,在

  8. (附源码)vue3.0+.NET6实现聊天室(实时聊天SignalR) - 2

    参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图:一.整体介绍  介绍SignalR一种通讯模型Hub(中心模型,或者叫集线器模型),调用这个模型写好的方法,去发送消息。  内容有:    ①:Hub模型的方法介绍    ②:服务器端代码介绍    ③:前端vue3安装并调用后端方法    ④:聊天室样例整体流程:1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法 前端通过,signalR内置方法.invoke()  去请求接口3、监听接受方法(渲染消息)通过new signalR.HubConnectionBuilder().on

  9. ruby-on-rails - 如何将变量值插入 ERB 模板中的 HTML 标签? - 2

    我有一个偏爱:如何将像o.office这样的值插入到属性中?value="#{o.office}"无效。 最佳答案 'type='text'/>或者你可以使用表单助手 关于ruby-on-rails-如何将变量值插入ERB模板中的HTML标签?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questions/6172174/

  10. ruby - 输出液体模板中的可用对象和属性 - 2

    有没有办法在liquidtemplate中输出(用于调试/信息目的)可用对象和对象属性??也就是说,假设我正在使用jekyll站点生成工具,并且我在我的index.html模板中(据我所知,这是一个液体模板)。它可能看起来像这样{%forpostinsite.posts%}{{post.date|date_to_string}}»{{post.title}}{%endfor%}是否有任何我可以使用的模板标签会告诉我/输出名为post的变量在此模板(以及其他模板)中可用。此外,是否有任何模板标签可以告诉我post对象具有键date、title、url、摘录、永久链接等

随机推荐