Vue

VueJS2: Section 3: 38

by Aubrey Taylor

HTML

<div id="app">
  <ul>
    <li v-for="(ingredient, i) in ingredients" :key="ingredient"> {{ ingredient }} ({{ i + 1 }})</li>
  </ul>
  <button @click="ingredients.push('spices')">Add New</button>
  <ul>
    <template v-for="(ingredient, i) in ingredients">
      <h1>{{ ingredient }}</h1>
      <p>{{ i }}</p>
    </template>
  </ul>
  <hr>
  <ul>
    <li v-for="person in persons">
      <p v-for="(value, key, index) in person">{{ key}}: {{ value }} ({{ index }})</p>
    </li>
  </ul>
  <span v-for="n in 10">{{ n }}</span>
  <hr>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
  el: "#app",
  data: {
  	ingredients: ["meat", "fruit", "cookies"],
    persons: [
    	{name: "Max", age:27, color: "red"},
      {name: "Anna", age: "unknown", color: "blue"},
    ]
  }
})