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.
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<!-- include vue -->
<script src="//unpkg.com/vue"></script>
<!-- page content -->
<div id="app">
List of coffees:

<script src="app.js"></script>

This results in:
vue.js list

← Vue App Vuejs if →


© vuejsexamples.net - Privacy Policy - Cookie Policy