# 循环 在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> ```