Vue

by karamarimo

HTML

<div id="app">
  <ul>
    <li v-for="(todo, index) in todos"
v-bind:class="{'active': index === 0}">{{todo.text}}</li>
  </ul>
</div>

CSS

.active:after {
  content: "← ACTIVE";
  margin-left: 20px;
  color: red;
}

Vue

new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Learn JavaScript" },
      { text: "Learn Vue" },
      { text: "Play around in JSFiddle" },
      { text: "Build something awesome" }
    ]
  }
})