vue學習(十) v-for循環普通數組 、對象數組、 叠代數字
阿新 • • 發佈:2019-05-03
span count clas spa 小白 開始 叠代 back nbsp
//html <div id="app"> <p v-for="item in list">{{item}}</p>
<p v-for="(item, i) in list">索引{{i}}---值{{item}}</p>
<p v-for="user in list2">id是{{user.id}}---名字是{{user.name}} </p>
<p v-for="(user,i) in list2">id是{{user.id}}---名字是{{user.name}}---索引是{{i}}</p>//遍歷對象身上的屬性和值,除了有key value 在第三個位置上還有一個索引
<p v-for="(key,value,i) in user">鍵是{{key}}---值是{{value}}---索引是{{i}}</p>
//叠代數字 叠代從1開始
<p v-for="count in 10">這是第{{count}}次循環</p> </div> //script <script> var vm = new Vue({ el:‘app‘, data:{ list:[1,2,3,4,5,6,7],list2:[
{ id:1, name:‘小白‘ },
{ id:2, name:‘小黑‘ },
{ id:3, name:‘小黃‘ }
],
user:{
id:1,
name:‘小紅‘,
gender:‘女‘
}
}, methods:{//methods中定義了當前vue實例中所有可用的方法 } }) </script>
vue學習(十) v-for循環普通數組 、對象數組、 叠代數字