v-for指令可以用於遍歷數組和對象
遍歷數組
<body>
<div id="app">
<ul>
<li v-for="item in books">{{item}}</li>
</ul>
</div>
<script>
const vue = new Vue({
el:"#app",
data:{
books:['狼道','人性的弱點','鬼谷子']
}
});
</script>
</body>
效果如下：
如果要把索引一塊取出來，如下
<body>
<div id="app">
<ul>
<li v-for="(item,index) in books">{{index}}-{{item}}</li>
</ul>
</div>
<script>
const vue = new Vue({
el:"#app",
data:{
books:['狼道','人性的弱點','鬼谷子']
}
});
</script>
</body>
效果如下：
這語法簡單大氣上檔次~~~
遍歷對象
除了遍歷數組也可以遍歷對象，默認情況下取的是對象的value值
<body>
<div id="app">
<ul>
<li v-for="item in student">{{item}}</li>
</ul>
</div>
<script>
const vue = new Vue({
el:"#app",
data:{
student:{
name:'張三',
num:'1',
age:'18',
sex:'男'
}
}
});
</script>
</body>
效果如下：
如果要連同對象的key一併取出，注意value要寫在前面，如下
<body>
<div id="app">
<ul>
<li v-for="(value,key) in student">{{key}}-{{value}}</li>
</ul>
</div>
<script>
const vue = new Vue({
el:"#app",
data:{
student:{
name:'張三',
num:'1',
age:'18',
sex:'男'
}
}
});
</script>
</body>
效果如下：
