# 循環 在vue中使用**v-for**進行循環遍歷 ***** ### 1.語法格式 v-for = "(變量1，變量2) in 數組名" v-bind：key = "唯一值" <br> ### 2.key值補充 >在實際工作中，key值往往第綁定后端給的一個唯一值（id值） 若我們沒有對key綁定內容時，這時計算機會默認給key綁定變量2 <br> ``` <div id="app"> <!-- 在輸入框填寫內容，點擊按鈕添加到列表中 --> <div> <input type="text" v-model="inputVal"> <button @click="add">點擊添加</button> </div> <ul> <!-- 循環遍歷 --> <!-- <li v-for = "(item,index) in arr1" :key = "index"><input type="checkbox"> {{item}}</li> --> <li v-for = "(item,index) in arr1" :key = "item "><input type="checkbox"> {{item}}</li> </ul> </div> <script> /* 目前key值是綁定index，在頁面數組前面添加內容時，會使得之前勾選了的改變，添加的內容會替換之前存在的內容，因為key值指的是索引，之前勾選的也是為索引而不是內容，所以我們需要把key值改為item 當數組是往后面添加是，key值則是需要綁定的是index值 若我們沒有對key綁定內容時，這時計算機會默認給key綁定index 在實際工作中，key值往往第綁定后端給的一個唯一值（id值） */ new Vue({ el: '#app', data: { inputVal: '', arr1: ['jQuery', 'vue'] }, methods: { // unshift 往數組前面添加 // shift 往數組后面添加 add() { this.arr1.unshift(this.inputVal); } } }) </script> ```