VueJS Template List Binding

andy - 24 Dec, 2020 1921 Views 0 Comment

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=""></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: `
				<li v-for="product in productList" v-bind:key="product.productId">
					{{ product.productName }}

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.


To see the live demo, you can click the following link.

See Vue Template Binding in action.


To download the demo file. Please click the following URL link.

Download file.


There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.

Related Blogs

Related Tutorials

How to set radio button checked in Vue.js?

If you have a group of radio buttons and want to bind and set a radio button to be checked. You can perform a condition against the checked property value of the radio button.

How to use methods in Vue.js?

In this tutorial we are going to learn on how to use methods in Vue js So what actually a method is in Vue js A method can be considered as an action It has a function procedure that is ...

VueJS Button Click Event

We are going to create a really simple VueJS application to showcase a button click event handling in VueJS.

What is a Vue.js?

Vue js is another popular javascript library for building interactive web interfaces The library is designed to focus on the view layer only It is very lightweight and pretty easy to use compare to another library competitors such as Angular ...