V-for和key属性

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

 <div id='app'>
        <ul>
            <li v-for="(value,key,index) in obj">{{key}}  {{value}}   {{index}}</li>
            
        </ul>
</div>

    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                obj: {
                    id: 1,
                    name: "pipi",
                }
            }
        })
    </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必须是唯一的