uni-app，v-for时 block 和 view 的使用

 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>
使用view时的效果

自带换行的效果
使用block时的效果

取消换行的效果