1. 程式人生 > >v-for循環中key的使用

v-for循環中key的使用

utf ice char -c 諸葛亮 com tle con 形式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Title</title> <script src="js/vue-2.4.0.js"></script> </head> <body> <div id="app"> <label>id: <input type="text" v-model="id"> </label> <label>name: <input type="text" v-model="name"> </label> <input type="button" value="添加" @click="add">
<!--註意:v-for循環的時候,key屬性只能使用 number和string--> <!--註意:key在使用的時候,必須用v-bind屬性綁定的形式,指定key的值--> <!--在組件中,使用v-for循環的時候,或者在一些特殊情況中,如果v-for有問題, 在使用v-for的同時,指定唯一的 數字/字符串 類型 :key值--> <p v-for="item in list" :key="item.id"> <input type="checkbox">{{item.id}}------{{item.name}} </p> </div> <script> const vm=new Vue({ el:‘#app‘, data:{ id:‘‘, name:‘‘, list:[ {id:1,name:‘諸葛亮‘}, {id:2,name:‘劉備‘}, {id:3,name:‘曹操‘}, {id:4,name:‘孫權‘}, {id:5,name:‘張飛‘}, ] }, methods:{ add(){ //添加方法 this.list.push({id:this.id,name:this.name}) } } }) </script> </body> </html>

v-for循環中key的使用