uniApp v-for 遍历渲染

讷讷發表於 2021-9-15 08:43:00

<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_2f3bebf6-5c30-4772-b485-e85a84f9e188" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_2f3bebf6-5c30-4772-b485-e85a84f9e188" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_2f3bebf6-5c30-4772-b485-e85a84f9e188" class="cnblogs_code_hide">
<pre><template>
<view>
 <view v-for="item in hero">

 英雄：<b>{{item.Name}}</b>
 <br>
 年龄：{{item.age}}
 <br>
 语言：<text v-for="langItem in item.language">{{langItem}}、</text>
 <br>
 兵器：{{item.weapon}}
 <hr>
 </view>
</view>
</template>

<script>

export default {
 data() {
 return {
 hero:[
 {
 "Name": "张飞",
 "age": 18,
 "language": ["JavaScript","C++","Go"],
 "weapon": "丈八蛇矛"
 },
 {
 "Name": "吕布",
 "age": 22,
 "language": ["易语言","C","JavaScript"],
 "weapon": "方天画戟"
 },
 {
 "Name": "刘备",
 "age": 33,
 "language": ["C语言","php","HTML5"],
 "weapon": "雌雄双剑"
 },
 {
 "Name": "貂蝉",
 "age": 45,
 "language": ["Java","C++","C语言"],
 "weapon": "美色"
 }
 ]
 }
 },
 methods:{

 }
}
</script>

<style>
input{
 margin-top: 100px;
}
</style></pre>
</div>
View Code</div>
下面代码对应这个：
<img src="https://img2020.cnblogs.com/blog/2050874/202109/2050874-20210915083834010-85115155.png" alt="" loading="lazy">　　　　
 
 
<h1> 可以看源码会变成标签uniview，而且语言也是univiwe，</h1>
如果我们吧语言遍历哪里改成 block  那么 uniapp 就直接打印元素  而不会遍历标签：
<img src="https://img2020.cnblogs.com/blog/2050874/202109/2050874-20210915084228777-336515278.png" alt="" loading="lazy">
 
<h2> 然后看源码：</h2>
<img src="https://img2020.cnblogs.com/blog/2050874/202109/2050874-20210915084300607-717690408.png" alt="" loading="lazy">
 
 可以发现语言这一块是直接打印的。
 
<h1>注意： root 跟节点不能v-for  刚刚就吃亏了..</h1>
 

</div>
<div id="MySignature" role="contentinfo">
本文来自博客园，作者：咸瑜，转载请注明原文链接：https://www.cnblogs.com/bi-hu/p/15270646.html 
来源：https://www.cnblogs.com/bi-hu/p/15270646.html

頁: [1]

琼殿技术论坛's Archiver

uniApp v-for 遍历渲染