vue——3-v-for

<div id="enjoy">
    <!--类似于js遍历-->
    <!--v-for优先级高于v-if之类的指令-->
    <!--
    注：
    v-for='(value, key, index) in object'传入在对象可接收三个：值，键值，索引
    v-for='(value, index) in arr'传入在对象可接收两个：值，索引
    -->


    <!--数组-->
    <p v-for="(item,index) in msg1">
        {{index + ' : ' + item}}
    </p>

    <!--对象-->
    <p v-for="(item, key, index) in msg2">
        {{index + ' : ' + key + ' : ' + 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
                }
            })
        }

注意

<div id="enjoy">
    <div>
        <label>Id:
            <input type="text" v-model="id">
        </label>
        <label>Name:
            <input type="text" v-model="name">
        </label>
        <label>Id:
            <input type="button" value="添加" @click="add">
        </label>
    </div>

    <!--
    注意：在组件或特殊情况中，v-for使用时key（指定唯一的 字符串/数字 类型）
    不可以少，否则下例中在前面添加新元素，checked会出错，以后能写尽量写上，
    防止出错
    -->
    <!--注意：v-for循环时，key属性只能使用number或string-->
    <!--注意：key在使用时，必须v-bind绑定-->
    <p v-for="item in list" :key="item.id">
        <input type="checkbox">
        {{item.id}}---{{item.name}}
    </p>
</div>

        {
            new Vue({
                el: '#enjoy',
                data: {
                    id: '',
                    name: '',
                    list: [
                        {id: 1, name: 'bob'},
                        {id: 2, name: 'lucy'},
                        {id: 3, name: 'tom'},
                        {id: 4, name: 'john'}
                    ]
                },
                methods: {
                    add() {//添加方法
                        this.list.unshift({id: this.id, name: this.name})
                    }
                }
            })
        }

实例

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;
        }

给 v-for 某行单独设置样式的方法：

<!-- 给 id 为 3 的 p标签 添加样式 style2 -->
<p :class="['style1' , item.id === 3 ? 'style2':'']" v-for="item in class" :key="item.id">
    {{ item.id }}
</p>

删除多项对应的项

<tr v-for="(p,index) in person">
            <td>{{p.name}}</td>
            <td>{{p.age}}</td>
            <td>{{p.sex}}</td>
            <td>{{p.num}}</td>
            <td>
                <button @click="deletePerson(index)">删除</button>
            </td>
        </tr>

 deletePerson(index){
                        this.person.splice(index,1);
                    }