v-for
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="vue-instance">
<ul>
<li v-for="item in inventory">
{{ item.name }} - ${{ item.price }}
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/vue/2.1.6/vue.js"></script>
<script>
var vm = new Vue({
el: '#vue-instance',
data: {
inventory: [
{name: 'MacBook Air', price: 1000},
{name: 'MacBook Pro', price: 1800},
{name: 'Lenovo W530', price: 1400},
{name: 'Acer Aspire One', price: 300}
]
}
});
</script>
</body>
</html>
Sometimes you may want to access the index of your loop:
<div id="vue-instance">
<ul>
<li v-for="(item, index) in inventory">
{{ index }} - {{ item.name }} - ${{ item.price }}
</li>
</ul>
</div>