Practice Set 1 - VueJS

by jessupjs

HTML

<h2>
  VueJS Template Exercise: iterating a list
</h2>
<p>
  In this exercise, we've created a Vue object in JavaScript and a DIV element in the HTML. Your task is to use the Vue template language to create an HTML unordered list of all the items in the Vue object's <code>progammingLanguages</code> array. 
</p>
<p>
  To do this, you'll use an iterator (consider the &lt;v-for&gt; directive). 
</p>

<div id="app">
    <ul>
      <li v-for="lang in programmingLanguages">{{ lang.name }}</li>
    </ul>
</div>

JavaScript

var v = new Vue({
    el: '#app',
    data: {
       programmingLanguages : [
      { name: "JavaScript" },
      { name: "Python" },
      { name: "PHP" },
      { name: "Julia" },
      { name: "Kotlin"}
     ]  
    }
});