zoukankan      html  css  js  c++  java
  • uni-app v-for用法

    存在以下变量

           data() {
                return {
                    stuArray:[
                        {name:"张三",age:12,skills:["Java","C#","Python"]},
                        {name:"李四",age:13,skills:["Sing","Dance","Rap","Basketball"]},
                        {name:"王五",age:14,skills:["Piano","Guitar","Trumpet"]}
                    ]
                }
            },

    使用v-for

    <view>
            <view v-for="(stu,index) in stuArray">
                <view>{{"姓名:"+stu.name+",年龄:"+stu.age+",序号:"+index}}</view>
                <view>
                    擅长技能:
                    <block v-for="sk in stu.skills">
                        {{sk}},
                    </block>
                </view>
            </view>
        </view>

    这里有几点需要注意

    1.不要对初始的view进行任何操作,否则会报错。必须在里面重新定义view标签

    2.这里遍历技能的时候使用block标签。这样做的目的是:

    如果使用view标签,那么每个技能都会重新占领一行,不美观。而使用block会将所有遍历的元素排列在一起,视为行内元素。

    最后的输出如下:

     

    记录编程的点滴,体会学习的乐趣
  • 相关阅读:
    转Vtype扩展
    Can't connect to MySQL server on 'ip' (13)
    观察者+js 模式
    (转)ASP.NET架构分析
    sql得到时间
    Js+XML 操作 (转)
    js中的math对象
    property和attribute的区别
    CSS样式定义
    linux 开启 mount
  • 原文地址:https://www.cnblogs.com/AduBlog/p/15362209.html
Copyright © 2011-2022 走看看