Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

Vue.js for

Related course:
Fullstack Vue: The Complete Guide to Vue.js

List an array automatically?

Vue.js can repeat HTML elements with v-for. Your vue app contains a data object. This javascript object can hold standard variables (Integers and text) but also arrays.

Rendering a list

If you create an array in your vue app (app.js) like this:

new Vue({
el: '#app',

data: {
coffees: [ 'Latte', 'Cream', 'Espresso', 'Iced', 'Moka' ]
}
});

You can then render each element using v-for.
Every round you can then access the current variable using the representation.

<html lang="en">
<head>
<meta charset="utf-8">
<title>//vuejsexamples.nettitle>

<script src="//unpkg.com/vue">script>
head>
<body>

<div id="app">
List of coffees:

*
div>
body>
<script src="app.js">script>
html>

This results in:
vue.js list

Download Vue.js Examples


← Vue App Vuejs if →

Posts


© vuejsexamples.net - Privacy Policy - Cookie Policy