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: