VueJS2 Net Ninja Part 6

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>VueJS2 Tutorials</title>
	<link href="style.css" rel="stylesheet">
	<script src="http://unpkg.com/vue"></script>
</head>
<body>
	<div id="vue-app">
		<h1>Looping through Lists</h1>
		<ul>
			<li v-for="character in characters">{{ character }}</li>
		</ul>
		<ul>
			<li v-for="ninja in ninjas">{{ ninja.name }} : {{ ninja.age}}</li>
		</ul>
		<ul>
			<li v-for="(ninja, index) in ninjas">{{ index }}. {{ ninja.name }} : {{ ninja.age}}</li>
		</ul>

		<template v-for="ninja in ninjas">
			<div v-for="(val,arr) in ninja">
				<p>{{ arr }} : {{ val }}</p>
			</div>
		</template> 
  </div>
	<script src="app.js"></script>
</body>
</html>

Vue

new Vue({
  el: '#vue-app',
  data: {
  	characters: ['A', 'B', 'C', 'D'],
		ninjas: [
		 	{ name: 'A', age: 25 },
		 	{ name: 'B', age: 35 },
		 	{ name: 'C', age: 55 }
		]
  }
});