vue v-for指令
生活随笔
收集整理的這篇文章主要介紹了
vue v-for指令
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
v-for是vue 的循環指令，作用是遍歷數組（對象）的每一個值
基本使用
<li v-for="item in arr">{{item}} </li>var vue = new Vue({el: "#app",data: {arr: ['蘋果','橘子','香蕉','草莓']} })item是arr數組的每一項枚舉值
v-for還有index和key屬性
<li v-for="(item,index) in arr" :key="index">{{index}}-{{item}}</li>item指的是被遍歷的數組（對象）的每一個值，item的命名不是規定的，可以自定義命名
index指的是每一項被遍歷的值的下標索引值
key是用來給每一項值加元素標識，作用是為了區分元素，為了實現最小量的更新
v-for還可以用來遍歷對象
var vue = new Vue({el: "#app",data: {obj:{name: '小明',age: '17歲',height: '175cm',sex: '男',hobby: '打籃球'}} })<li v-for="(item,index) in obj" :key="index">{{index}}:{{item}}</li>和數組內容不同的是index此時代表的是對象的key
正確的表示方法
上面的v-for一共有三個參數
item表示對象的內容，
key表示的是對象key鍵值名稱
index表示的是當前obj的下標索引值
實際工作中我們使用v-for遍歷JSON更多一點
var vue = new Vue({el: "#app",data: {arr: [{name:'小明',age: '17',sex:'男',height: '168'},{name:'小紅',age: '18',sex:'女',height: '165'},{name:'小周',age: '19',sex:'男',height: '178'},{name:'小剛',age: '20',sex:'男',height: '167'}]} })<table><tr><th>姓名</th><th>年齡</th><th>性別</th><th>身高</th></tr><tr v-for="(item,index) in arr"><!-- JOSN中的姓名 --><td>{{item.name}}</td><!-- JOSN中的年齡 --><td>{{item.age}}</td><!-- JOSN中的性別 --><td>{{item.sex}}</td><!-- JOSN中的身高 --><td>{{item.height}}</td></tr> </table>v-for是可以進行嵌套的
<body><div id="app"><table><tr v-for="i in number" :key="i"><td v-for="j in i" :key="j">{{i}}X{{j}}={{i*j}}</td></tr></table></div><script src = "js/vue.js"></script><script>var vue = new Vue({el: "#app",data: {number:[1,2,3,4,5,6,7,8,9]}})</script> </body>使用 v-for需要注意的情況
1)v-for遍歷的出來的不是數據，而是元素
2)如果使用item和index的時候一定要使用括號包裹起來
總結
以上是生活随笔為你收集整理的vue v-for指令的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： vue v-show指令
- 下一篇： vue组件的基本使用：入门示例