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>

下面代碼對應這個：

　　　　

 

 

 可以看源碼 會變成 標簽uniview，而且語言也是univiwe，

如果我們吧 語言遍歷哪里改成 block  那么 uniapp 就直接打印元素  而不會遍歷標簽：

 

 然后看源碼：

 

 可以發現語言這一塊是直接打印的。

 

注意： root 跟節點不能v-for  剛剛就吃虧了..