列表渲染 v-for的使用

<table class="table table-bordered table-hover table-striped" >
            <thead>
                <th>索引</th>
                <th>Id</th> 
                <th>姓名</th> 
            </thead>
            <tbody> 
                <tr v-for="(item,index) in list" :key="item.id"  :title = 'item.name + index'>
                    <td>{{index}}</td>
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        let vm = new Vue({
           el:'#app',
            data:{
                username:"zhangsan",
                n1:1,
                n2:2,
                type:"J",
                list:[
                    {id: 1,name:'张三'},
                    {id: 2,name:'李四'},
                    {id: 3,name:"王麻"}
                ]
            },
            methods: {
                showName(){
                    console.log('用户名:'+this.username)
                }
            },
        })
    </script>

V-for中key值使用的注意点
建议：
1.只要用到了v-for指令，那么一定要绑定一个 ：key属性
2.尽量把id作为key的值（当前循环项的id值）
3.key的值只能是字符串和数字类型（建议id值唯一）
4.索引不具有唯一性（没有意义）