Learn html, css, javascript online and how to make a webpage design

How to user v-for to render list data in VueJS ?

Saturday 2nd of January 2021 01:31:37 PMVueJS

We can use the v-for directive to render a list of items based on an array. The v-for directive requires a special syntax in the form of item in items, where items is the source data array and item is an alias for the array element being iterated, v-for also supports an optional second argument for the index of the current item.


<!DOCTYPE html>
    <title>How to use v-for to render list data ? - HtmlcssDownload.com</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
       <li v-for="(item, index) in categories">{{ index }}. {{ item.name }}</li>
<script type="text/javascript">
    var app = new Vue({
      el: '#app',
      data: {
         categories: [
            {name: 'Javascript'},
            {name: 'Html'},
            {name: 'Css'},
            {name: 'VueJS'}


We are Recommending you: