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