1.v-for基本用法
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>v-for 指令</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <!--v-for循環普通數組--> <p v-for="(item,i) in list">--索引值--{{i}} --每一項--{{item}}</p> <br /> <!--v-for循環對象數組--> <p v-for="(item,i) in listObj">--索引值--{{i}}--id--{{item.id}} --姓名--{{item.name}}</p> <br /> <!--v-for迭代對象；注意，在遍歷對象的鍵值對的時候，除了有 val 和 key,在第三個位置還有一個索引--> <p v-for="(val,key,i) in user">--索引值--{{i}}--鍵是--{{key}} --值是--{{val}}</p> <br /> <!--v-for迭代數字； in 后面我們放過數組、對象數組、對象，還可以放數字--> <!-- 注意：如果使用v-for迭代數字的話，前面 count 的值從 1 開始--> <p v-for="count in 10">這是第{{count}}次循環</p> </div> </body> </html> <script> var app = new Vue({ el: "#app", data: { list: [1, 2, 3, 4, 5], listObj: [{ id: 1, name: 'zs1' }, { id: 2, name: 'zs2' }, { id: 3, name: 'zs3' }, { id: 4, name: 'zs4' }, { id: 5, name: 'zs5' }, ], user: { id: 1, name: '小明', gender: '男', age: '18', classname: 'A1631' } } }) </script>
2.v-for為什么要加key
先看示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>v-for 指令</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <div> <input type="text" v-model="name"> <button @click="add">添加</button> </div> <ul> <li v-for="(item,i) in list"> <input type="checkbox"> {{item.name}} </li> </ul> <br /> <ul> <li v-for="(item, i) in list" v-bind:key="item.id"> <input type="checkbox"> {{item.name}} </li> </ul> </div> </body> </html> <script> var app = new Vue({ el: "#app", data: { name: '', newId: 3, list: [{ id: 1, name: 'xt1' }, { id: 2, name: 'xt2' }, { id: 3, name: 'xt3' }, ], }, methods: { add() { //注意這里是unshift this.list.unshift({ id: ++this.newId, name: this.name }) this.name = '' } }, }); </script>
沒有key時，當選中xt2時，添加xt后選中的卻是xt1，並不是我們想要的結果；有key時，當選中xt2時，添加xt后依舊選中的是xt2，是我們想要的結果。
vue中列表循環需加:key="唯一標識" 唯一標識可以是item里面id index等，因為vue組件高度復用，增加Key可以標識組件的唯一性。
3.v-if 與 v-for 一起使用
當 v-if 與 v-for 一起使用時，v-for 具有比 v-if 更高的優先級。
這意味着 v-if 將分別重復運行於每個 v-for 循環中。當你只想為部分項渲染節點時，這種優先級的機制會十分有用。
有數據時顯示循環列表，沒有數據時顯示暫無數據。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>v-for 指令</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <ul v-if="todos.length>0"> <li v-for="todo in todos" v-bind:key="todo.id"> {{ todo.name }} </li> </ul> <p v-else>暫時沒有數據</p> </div> </body> </html> <script> var app = new Vue({ el: "#app", data: { todos: [{ id: 1, name: '列表1' }, { id: 2, name: '列表2' }, { id: 3, name: '列表3' }, ], }, }); </script>