Vue

by cedric_tarou

HTML

<div id="app" class="container">
<hi>My todos</hi>
  <ul>
<!--     <li>{{todos[0]}}</li>
        <li>{{todos[1]}}</li>
            <li>{{todos[2]}}</li> -->
       <li v-for="todo in todos">{{todo}}</li>
  </ul>
  <form action="">
    <input type="text">
    <input type="submit" value="add">
  </form>
</div>

CSS

body {
  background: #ddd;
  padding: 20px;
  font-family: helvetica;
}

.container {
  width: 300px;
  margin: 0 auto;
}
#aap h1 {
  font-size: 16px;
  border-bottom: 1px solid #ddd;
  padding: 16px 0;
}

Vue

new Vue({
  el: "#app",
  data: {
 		todos:[
    'task1',
    'task2',
    'task3',
    ]
  },

})