Looping with v-for

by Megi93

HTML

<div id="vue-app">
	<h1>Looping through list</h1>
	<ul>
		<li v-for="(character, index) in characters">
			{{ index }} . {{ character }}
		</li>
	</ul>
	<ul>
		<li v-for="(ninja, index) in ninjas">{{ index}} . {{ ninja.name }} - {{ ninja.age }}</li>
	</ul>
	<template v-for="(ninja, index) in ninjas">
		<h3>{{ index }} . {{ ninja.name }}</h3>
		<p> {{ ninja.age }} </p>
	</template>
	
	<template v-for="ninja in ninjas">
		<div v-for="(val, key) in ninja">
			<p> {{ key }} - {{ val }} </p>
		</div>
	</template>
</div>

JavaScript

new Vue ({
	el: '#vue-app',
	data: {
		characters: ['Mario', 'Luigi', 'Yoshi', 'Bowser'],
		ninjas: [
			{name: 'Ryu', age: 25},
			{name: 'Yoshi', age: 35},
			{name: 'Ken', age: 55}
		]
	},
	methods: {
	
	},
	computed: {
	
	}
})