1 <template>
2 <view>
3 <view v-for="stuObj in studentArry">
4 <view>姓名: {{ stuObj.name}} , 年龄: {{ stuObj.age}}</view>
5 <view>
6 擅长技能:
7 <!-- 双层循环 sk in stuObj.skill 就像 stuObj in studentArry 一样，
8 只不过 sk in stuObj.skill 是在 stuObj in studentArry 之中 -->
9 <view>
10 <!-- <view v-for="sk in stuObj.skill">
11 {{ sk }}
12 </view> -->
13
14 <!-- block 使 技能不换行，否则用 view的话默认 唱，跳，rap 是三行 ，用 block 的话是一行 -->
15 <block v-for="sk in stuObj.skill">
16 {{ sk }},
17 </block>
18 </view>
19 </view>
20 </view>
21 </view>
22 </template>
23
24 <script>
25 export default {
26 data() {
27 return {
28 studentArry: [
29 {
30 name: '小明',
31 age: 18,
32 skill: ["唱", "跳", "rap"]
33 },
34 {
35 name: '小红',
36 age: 19,
37 skill: ["唱"]
38 },
39 {
40 name: '小李',
41 age: 17,
42 skill: ["跳"]
43 },
44 {
45 name: '小莉',
46 age: 18,
47 skill: ["rap"]
48 },
49 {
50 name: '小美',
51 age: 18,
52 skill: ["跳", "rap"]
53 }
54 ]
55 }
56 },
57 methods: {
58
59 }
60 }
61 </script>
62
63 <style>
64
65 </style>
發表於 2019-6-20 14:34:00
