uniApp v-for 遍历渲染

讷讷

<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>

View Code

下面代码对应这个：

　　　　

 

 

 可以看源码 会变成 标签uniview，而且语言也是univiwe，

如果我们吧 语言遍历哪里改成 block  那么 uniapp 就直接打印元素  而不会遍历标签：

 

 然后看源码：

 

 可以发现语言这一块是直接打印的。

 

注意： root 跟节点不能v-for  刚刚就吃亏了..

 

本文来自博客园，作者：咸瑜，转载请注明原文链接：https://www.cnblogs.com/bi-hu/p/15270646.html

来源：https://www.cnblogs.com/bi-hu/p/15270646.html