zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    SNMP简介
    命令模式
    牛顿法
    仿射函数
    schedule
    命令模式
    牛顿法
    schedule
    仿射函数
    适配器模式
  • 原文地址:https://www.cnblogs.com/bi-hu/p/15270646.html
Copyright © 2011-2022 走看看