15 Apr 2021

Vuejs : List Rendering


Well, I have again come with interesting thing about Vue js. Today i will learn about How to render to list items (Javascript Array Object).

Simple List Rendering in Vuejs

it is an example of simple List Rendering under the Vue.

    <div id="app">

    <ul>
        <li v-for="item in items" v-bind:key="">
            {{item}}
        </li>

    </ul>

JavaScript

let vm = new Vue({

   el : "#app",
   data : {

       items : ["Boostrap", "Jquery", "Framer-motion"]
       
         }
});
        

Array itrate with (item & index)

Vue list rendering with item and its index of Array.

HTML
  <ul id="ul">

        <li v-for="(item,index) in items">

        {{index}}  :   {{item}}

        </li>

    </ul>
  
Preview
  • 0 : Boostrap
  • 1 : Jquery
  • 2 : Framer-motion

Iterating Js Object for keys

Vuejs have ability to iterate over javascript object for keys and values also.
whenever you itrate an js object, vue provides (value/key, name, index ) like parameter for Object.

    <ul>

        <li v-for="(value, name, index) in author">

        {{name}} :- {{value}}

        </li>

    </ul>

    

  var vm = new Vue({
  el : "#root",
  data : {
  author : { 
        name : "Ashutosh Kumar",
        nationality : "India"
         }
  }
  });
  

∆ Preview ∆

  • name :- Ashutosh Kumar
  • nationality :- India
While you itrate an js object for value, internally it uses Object.keys() static method to get list of keys as an Array from JS object.

Reaction:

No comments:

No Comments

COMMENT FROM MESSAGE