Learn Vue JS 2 @ playground

by Trina Lu

HTML

<script src="https://unpkg.com/[email protected]"></script>
<div id="app">
  <ul>
    <li v-for="item in items"> {{ item }}</li>
  </ul>
  
    <ul>
      <li v-for="student in students">
        <p v-for="(value, key, index) in student">
            <span>{{ key }}</span> : <span>{{ value }}</span> ({{index}})
        </p>
      </li>
    </ul>
</div>

CSS

.demo {
  width: 100px;
  height: 100px;
  display: inline-block;
  margin: 10px;
  background: red;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    items: ["apple", "banana", "cookie"],
    students: [
    	{ name: "Trina", age: 24, color: 'gold' },
      { name: "Sherry", age: 23, color: 'purple' },
    ]
  }
})