存在以下变量
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会将所有遍历的元素排列在一起,视为行内元素。
最后的输出如下: