v-for 和key 属性

一、v-for

1、遍历数组，参数(item,index) in list

 <div id="app">
        <ul>
            <li v-for="item in list">
                {{item.name}}
            </li>
        </ul>
    </div>


<script>
    var vm = new Vue({
        el: '#app',
        data: {
            list:[{ id: 1, name: "李白" },
            { id: 2, name: "杨玉环" },
            { id: 3, name: "西施" },
            { id: 4, name: "貂蝉" },
            { id: 5, name: "王昭君" }]
        }
    })
</script>

2、遍历对象，参数(value,key,index) in obj

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
        .li1 {
            background: orange;
        }

        .li2 {
            background: red;
        }
    </style>
<ul>
            <li v-for="(value,key,index) in user">对象的键()：{{key}},对象的值：{{value}}, 数组的下标{{index}}</li>
        </ul>
<script>
    var vm = new Vue({
        el: '#app',

        data: {
            message: 'HelloVue!',
            user: {
                userId: 19,
                name: '测试name',
                age: 18
            },
           
        },
        methods: {
            add() {
                this.list.unshift({
                    userId: 10,
                    name: "新来的"

                })
            }
        },
    })
</script>

3、遍历数字，i in 10(1~10)

<div id='app'>  
    <ul>
            <li v-for="i in 10">{{i}}</li>
    </ul>
</div>
<script>
        const vm = new Vue({
            el: '#app',
            data: {
               
            }
        })
</script>

4、key在使用v-for的时候都需要去设置key
1、让界面元素和数组里的每个记录进行绑定
2、key只能是字符串或者数字
3、key必须是唯一的

例子 v-for实现隔行换色

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .li1 {
            background: orange;
        }

        .li2 {
            background: red;
        }
    </style>

</head>

<body>
    <div id="app">
        <h1>v-for的key(实现隔行变色)</h1>
        <button @click='add'>add</button>
        <ul>
            <li v-for='(item,index) in list' :class="index%2? 'li1' : 'li2'" :key='item.id'>
                <input type="checkbox">{{item.name}}数组的下标{{index}}
            </li>
        </ul>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',

        data: {
            message: 'HelloVue!',
            
            list: [{
                id: 1,
                name: '诸葛亮'
            },
            {
                id: 2,
                name: '刘备'
            },
            {
                id: 3,
                name: '关羽'
            },
            {
                id: 4,
                name: '张飞'
            },
            {
                id: 5,
                name: '赵云'
            }
            ]
        },
        methods: {
            add() {
                this.list.unshift({
                    userId: 10,
                    name: "新来的"

                })
            }
        },
    })
</script>

</html>