Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

Vue.js for

Related:
Vue: Step-By-Step Guide To Mastering Vue.js From Beginner To Advanced (Vue.js, Learning Vue js 2)

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">
<head>
<meta charset="utf-8">
<title>//vuejsexamples.net</title>
<!-- include vue -->
<script src="//unpkg.com/vue"></script>
</head>
<body>
<!-- page content -->
<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