vue——3-v-for及其实例

版权声明：转发博客 请注明出处 否则必究 https://blog.csdn.net/lucky541788/article/details/82716552

<div id="enjoy">
    <!--类似于js遍历-->
    <!--v-for优先级高于v-if之类的指令-->
    <p v-for="(item,index) in msg1">
        {{index + ' : ' + item}}
    </p>

    <p v-for="item in msg2">
        {{item}}
    </p>

    <p v-for="item in msg3">
        {{item}}
    </p>

    <!--遍历数字是从1遍历到指定值-->
    <p v-for="item in msg4">
        {{item}}
    </p>
</div>

        {
            new Vue({
                el: '#enjoy',
                data: {
                    msg1: [10, 20, 30, 40, 50],
                    msg2: {name: 'bob', age: 10, friend: 'lucy'},
                    msg3: 'lucy',
                    msg4: 4
                }
            })
        }

实例

html

<div id="enjoy">
    <table>
        <thead>
        <tr>
            <td>name</td>
            <td>age</td>
            <td>sex</td>
        </tr>
        </thead>
        <tbody v-for="p in person">
        <tr>
            <td>{{p.name}}</td>
            <td>{{p.age}}</td>
            <td>{{p.sex}}</td>
        </tr>
        </tbody>
    </table>
</div>

js

        {
            new Vue({
                el: '#enjoy',
                data: {
                    person: [
                        {name: 'bob', age: 20, sex: 'man'},
                        {name: 'bob1', age: 21, sex: 'man1'},
                        {name: 'bob2', age: 22, sex: 'man2'},
                        {name: 'bob3', age: 23, sex: 'man3'}
                    ]
                }
            })
        }

css

        table{
            width: 600px;
            border: 1px solid orangered;
            text-align: center;
        }
        thead{
            background-color: orange;
        }