<div id="app">
  <h3>Skills</h3>
  <ul>
    <li v-for="skill in skills">
      {{ skill }}
    </li>
  </ul>
  <h3>Info</h3>
  <div v-for="(value, name) in user">
    <strong>{{ name }}</strong>: {{ value }}
  </div>
</div>
var vue = new Vue({
  el: "#app",
  data: {
    skills: {
      backend: "PHP",
      backendFramework: "Laravel",
    },
    user: {
      name: "Steave",
      position: "Web Developer",
    }
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.jsdelivr.net/npm/vue/dist/vue.js