How to display list of items in Vuejs


An ideal vue component may consist of three sections as in angular, template, Script and Style.

In the following example we will learn how to deal lists in Vuejs template.

   <Div v-for="(color, index) in colorList"
                  :key="index"
                >
                  {{ color}}
                </Div>

In the above code we had a list which contain a list of colors and wand to render the item in a div. We can use the v-for directive to process the list which is similar to for loop in other programming languages.

As a list it is common to use index to locate the element in the list. Then we can use the interpolation statement ( {{ }}) to display the value.

The following vue post posts may help you

Published by

Manoj

A developer,teacher and a blogger obsessed with Python,Dart and open source world from India

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.