zoukankan      html  css  js  c++  java
  • v-for 循环 绑定对象 和数组

      <!--v-for  迭代数组-->
        <div id="app11">
            <div v-for="info in infos">
                <p>{{ info.Name }}</p>
            </div>
        </div>
    
        <!--v-for  迭代对象属性-->
        <!-- value in infos-->
        <!--(value, key) in infos-->
        <!--(value, key, index) in infos-->
        <div id="app12">
            <div v-for="(value, key, index) in infos">
    
                <p>key:{{ key }} value:{{ value }} index:{{ index }}</p>
            </div>
        </div>
    
        <!--对象数组绑定到table-->
        <div id="app13">
            <table>
                <thead>
                    <tr>
                        <td>姓名</td>
                        <td>年龄</td>
                        <td>性别</td>
                    </tr>
                </thead>
                <tbody v-for="obj in infos">
                    <tr>
                        <td>{{ obj.Name }}</td>
                        <td>{{ obj.Age }}</td>
                        <td>{{ obj.Sex }}</td>
                    </tr>             
                </tbody>
            </table>                           
        </div>
    
    调用:
     Stydy_V_For("#app11");
    
        Stydy_V_For01("#app12");
    
        Stydy_V_For02("#app13")
    
    实现:
    //  数据 循环绑定
    //  v-for  迭代一个数组
    function Stydy_V_For(obj) {
        new Vue({
            el: obj,
            data: {
                infos: [{ Name: 'zheng' }, {Name:'h'}]
            }
        })
    }
    
    // 迭代对象的属性
    function Stydy_V_For01(obj) {
        new Vue({
            el: obj,
            data: {
                infos: {
                    Name: 'hhhh',
                    Age: 11,
                    Sex:'male'
    
                }
            }
        })
    }
    
    // 迭代数组对象
    function Stydy_V_For02(obj) {
        new Vue({
            el: obj,
            data: {
                infos: [{
                    Name: 'hhhh',
                    Age: 11,
                    Sex: 'male'
    
                }, {
                        Name: 'afsfaa',
                        Age: 222,
                        Sex: 'male'
                    },
                    {
                        Name: 'dsfdsfs',
                        Age: 333,
                        Sex: 'fsf'
    
                    }
                ]
                
            }
        })
    }
    

      

  • 相关阅读:
    【文字检测算法整理】
    【LDA】周志华
    【PCA】周志华
    【SVM】周志华
    4.1、顺序栈的实现(java实现)
    3.1、双向循环链表(java实现)
    5、链表队列(java实现)
    4、链栈的实现(java代码)
    3、循环链表(java实现)
    CommonsMultipartFile 转为 File 类型
  • 原文地址:https://www.cnblogs.com/hnzheng/p/9139677.html
Copyright © 2011-2022 走看看