<h1>Municipalities in Wiscosin</h1>

<div id="app">
	
<table>
	<thead>
    <tr>
      <th>Municipalities</th>
      <th>2010 Population</th>
      <th>County</th>
    </tr>
  </thead>
	<tbody>
    <tr v-for="(city, index) in cities" v-bind:class="{ 'isHighlighted': index%2}">
      <td>{{ city.municipality }}</td>
      <td>{{ city.population }}</td>
      <td>{{ city.county }}</td>
    </tr>
	</tbody>
</table>
	
</div>

.isHighlighted {
  background-color: #AAC4FF;
}

var app = new Vue({
  el: '#app',
  data: {
    cities: [
      { municipality: 'Milwaukee', population: '594,833', county: 'Milwaukee' },
      { municipality: 'Madison', population: '233,209', county: 'Dane' },
      { municipality: 'Green Bay', population: '104,057', county: 'Brown' },
      { municipality: 'Kenosha', population: '99,218', county: 'Kenosha' },
      { municipality: 'Racine', population: '78,860', county: 'Racine' },
      { municipality: 'Appleton', population: '72,623', county: 'Outagamie' },
      { municipality: 'Waukesha', population: '70,718', county: 'Waukesha' },
      { municipality: 'Oshkosh', population: '66,083', county: 'Winnebago' },
      { municipality: 'Eau Claire', population: '65,883', county: 'Eau Claire' },
      { municipality: 'Janesville', population: '63,575', county: 'Rock' }
    ]
  }
})