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.

Example:

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

We are Recommending you: