In this tutorial, we are going to learn how to populate the content using the VueJs template. We will use a for loop method to read the array of a product list and bind it to the UL LI HTML list.
When declaring a VueJS application, there is a template section where we can specify our HTML content template. See below code on how the template works in VueJS.
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
productList: [
{productId: 1, productName: "Wallet"},
{productId: 2, productName: "Belt"},
{productId: 3, productName: "Pants"},
{productId: 4, productName: "Tshirt"}
]
},
template: `
<ul>
<li v-for="product in productList" v-bind:key="product.productId">
{{ product.productName }}
</li>
</ul>
`
});
</script>
If you have a look at the above code. We declare an array variable called productList and injected 4 product information. Then in the template section, we populate the productList into a for loop array. Here is how it looks when you open it using the browser.
Demo
To see the live demo, you can click the following link.
See Vue Template Binding in action.
Download
To download the demo file. Please click the following URL link.