<!--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'

                }

            ]

        }

    })

}