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'

                }
            ]
            
        }
    })
}

　　

转载于:https://www.cnblogs.com/hnzheng/p/9139677.html