uni-app，v-for时 block 和 view 的使用
<h1>uni-app，v-for时 block 和 view 的使用</h1><div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 128, 1)"> 1</span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">template</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 128, 128, 1)"> 2</span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">view</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 128, 128, 1)"> 3</span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">view </span><span style="color: rgba(255, 0, 0, 1)">v-for</span><span style="color: rgba(0, 0, 255, 1)">="stuObj in studentArry"</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 128, 128, 1)"> 4</span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">view</span><span style="color: rgba(0, 0, 255, 1)">></span>姓名: {{ stuObj.name}} , 年龄: {{ stuObj.age}}<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">view</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 128, 128, 1)"> 5</span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">view</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 128, 128, 1)"> 6</span> <span style="color: rgba(0, 0, 0, 1)"> 擅长技能:
</span><span style="color: rgba(0, 128, 128, 1)"> 7</span> <span style="color: rgba(0, 128, 0, 1)"><!--</span><span style="color: rgba(0, 128, 0, 1)"> 双层循环 sk in stuObj.skill 就像stuObj in studentArry 一样，
</span><span style="color: rgba(0, 128, 128, 1)"> 8</span> <span style="color: rgba(0, 128, 0, 1)"> 只不过 sk in stuObj.skill 是在 stuObj in studentArry 之中 </span><span style="color: rgba(0, 128, 0, 1)">--></span>
<span style="color: rgba(0, 128, 128, 1)"> 9</span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">view</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 128, 128, 1)">10</span> <span style="color: rgba(0, 128, 0, 1)"><!--</span><span style="color: rgba(0, 128, 0, 1)"> <view v-for="sk in stuObj.skill">
</span><span style="color: rgba(0, 128, 128, 1)">11</span> <span style="color: rgba(0, 128, 0, 1)"> {{ sk }}
</span><span style="color: rgba(0, 128, 128, 1)">12</span> <span style="color: rgba(0, 128, 0, 1)"> </view> </span><span style="color: rgba(0, 128, 0, 1)">--></span>
<span style="color: rgba(0, 128, 128, 1)">13</span>
<span style="color: rgba(0, 128, 128, 1)">14</span> <span style="color: rgba(0, 128, 0, 1)"><!--</span><span style="color: rgba(0, 128, 0, 1)"> block 使 技能不换行，否则用 view的话默认 唱，跳，rap 是三行 ，用 block 的话是一行 </span><span style="color: rgba(0, 128, 0, 1)">--></span>
<span style="color: rgba(0, 128, 128, 1)">15</span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">block </span><span style="color: rgba(255, 0, 0, 1)">v-for</span><span style="color: rgba(0, 0, 255, 1)">="sk in stuObj.skill"</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 128, 128, 1)">16</span> <span style="color: rgba(0, 0, 0, 1)"> {{ sk }},
</span><span style="color: rgba(0, 128, 128, 1)">17</span> <span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">block</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 128, 128, 1)">18</span> <span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">view</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 128, 128, 1)">19</span> <span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">view</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 128, 128, 1)">20</span> <span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">view</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 128, 128, 1)">21</span> <span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">view</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 128, 128, 1)">22</span> <span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">template</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 128, 128, 1)">23</span>
<span style="color: rgba(0, 128, 128, 1)">24</span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">script</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 128, 128, 1)">25</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> export </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">default</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 128, 128, 1)">26</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> data() {
</span><span style="color: rgba(0, 128, 128, 1)">27</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">return</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 128, 128, 1)">28</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> studentArry: [
</span><span style="color: rgba(0, 128, 128, 1)">29</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 128, 128, 1)">30</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> name: </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">小明</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">,
</span><span style="color: rgba(0, 128, 128, 1)">31</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> age: </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">18</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">,
</span><span style="color: rgba(0, 128, 128, 1)">32</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> skill: [</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">唱</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">, </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">跳</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">, </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">rap</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">]
</span><span style="color: rgba(0, 128, 128, 1)">33</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> },
</span><span style="color: rgba(0, 128, 128, 1)">34</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 128, 128, 1)">35</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> name: </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">小红</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">,
</span><span style="color: rgba(0, 128, 128, 1)">36</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> age: </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">19</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">,
</span><span style="color: rgba(0, 128, 128, 1)">37</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> skill: [</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">唱</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">]
</span><span style="color: rgba(0, 128, 128, 1)">38</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> },
</span><span style="color: rgba(0, 128, 128, 1)">39</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 128, 128, 1)">40</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> name: </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">小李</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">,
</span><span style="color: rgba(0, 128, 128, 1)">41</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> age: </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">17</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">,
</span><span style="color: rgba(0, 128, 128, 1)">42</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> skill: [</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">跳</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">]
</span><span style="color: rgba(0, 128, 128, 1)">43</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> },
</span><span style="color: rgba(0, 128, 128, 1)">44</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 128, 128, 1)">45</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> name: </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">小莉</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">,
</span><span style="color: rgba(0, 128, 128, 1)">46</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> age: </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">18</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">,
</span><span style="color: rgba(0, 128, 128, 1)">47</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> skill: [</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">rap</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">]
</span><span style="color: rgba(0, 128, 128, 1)">48</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> },
</span><span style="color: rgba(0, 128, 128, 1)">49</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 128, 128, 1)">50</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> name: </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">小美</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">,
</span><span style="color: rgba(0, 128, 128, 1)">51</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> age: </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">18</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">,
</span><span style="color: rgba(0, 128, 128, 1)">52</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> skill: [</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">跳</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">, </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">rap</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">]
</span><span style="color: rgba(0, 128, 128, 1)">53</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> }
</span><span style="color: rgba(0, 128, 128, 1)">54</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> ]
</span><span style="color: rgba(0, 128, 128, 1)">55</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> }
</span><span style="color: rgba(0, 128, 128, 1)">56</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> },
</span><span style="color: rgba(0, 128, 128, 1)">57</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> methods: {
</span><span style="color: rgba(0, 128, 128, 1)">58</span>
<span style="color: rgba(0, 128, 128, 1)">59</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> }
</span><span style="color: rgba(0, 128, 128, 1)">60</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> }
</span><span style="color: rgba(0, 128, 128, 1)">61</span> <span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">script</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 128, 128, 1)">62</span>
<span style="color: rgba(0, 128, 128, 1)">63</span> <span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">style</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 128, 128, 1)">64</span>
<span style="color: rgba(0, 128, 128, 1)">65</span> <span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">style</span><span style="color: rgba(0, 0, 255, 1)">></span></pre>
</div>
<p> </p>
<h4> 使用view时的效果 </h4>
<p> 自带换行的效果</p>
<p><img src="https://img2018.cnblogs.com/blog/1709882/201906/1709882-20190620143130467-952183155.png"></p>
<p> </p>
<h4>使用block时的效果</h4>
<p> 取消换行的效果</p>
<p><img src="https://img2018.cnblogs.com/blog/1709882/201906/1709882-20190620143247350-910338057.png"></p><br><br>
来源：https://www.cnblogs.com/wo1ow1ow1/p/11058571.html
頁:
[1]