Use of v-for list rendering instructions in Vue.js (code example)-JS Tutorial-php.cn

Use of v-for list rendering instructions in Vue.js (code example)

藏色散人

Release： 2019-03-30 09:58:09

Original

3265 people have browsed it

This article will introduce to you how to loop an array and render a list of items in vuejs. I hope it will be helpful to friends in need!

Use of v-for list rendering instructions in Vue.js (code example)

##v-forDirectives

Vuejs Provides us with a v-for directive for rendering a list of items into the dom.

v-for Syntax of the directive

v-for="user in users"
<!-- user variable is iterator -->
<!--users is data array-->

Copy after login

Example

<template>
 <ul>
   <!-- list rendering starts -->
  <li v-for="user in users">{{user.name}}</li>
 </ul>
</template>

<script>
 export default{
     data:function(){
         return{
             users:[
                 {id:1,name:"king"},
                 {id:2,name:"gowtham"},
                 {id:3,name:"ooops"},
             ]
         }
     }
 }
</script>

Copy after login

is above In the code, we use the

v-for instruction to loop through the users array, so that in each loop the user variable points to a different object that appears in the array.

Use of v-for list rendering instructions in Vue.js (code example)

keyAttribute

When using

v-for directive, we need to add a key attribute to the element because vuejs needs to track the list item based on the provided key.

Note: Key should be unique

Let’s add the key attribute to the template.

<template>
 <ul>
  <li v-for="user in users" :key="user.id">
    {{user.name}}
  </li>
 </ul>
</template>

<script>
 export default{
     data:function(){
         return{
             users:[
                 {id:1,name:"king"},
                 {id:2,name:"gowtham"},
                 {id:3,name:"ooops"},
             ]
         }
     }
 }
</script>

Copy after login

In the

users array, the id attribute is unique to each object, so we pass it to the key attribute.

We can also access the index of each item in the array.

<template>
<ul>
  <li v-for="(user,index) in users" :key="user.id">
    {{user.name}} {{index}}
  </li>
 </ul>
</template>

Copy after login

Iterating over objects

We can also loop over

JavaScript objects by using the v-for directive.

<template>
  <ul>
    <!-- accessing `value and key` present in person object -->
    <li v-for="(value, key) in person" :key="key">
      {{key}} : {{ value }}
    </li>
  </ul>
</template>

<script>
export default {
  data: function() {
    return {
      person: {
        firstName: "Rim",
        lastName: "Doe",
        age: 20,
        eyeColor: "blue"
      }
    };
  }
};
</script>

Copy after login

Use of v-for list rendering instructions in Vue.js (code example)

Note: In the object, we need to extract the

value first, and then the key.

This article is about the use of v-for list rendering instructions in Vue.js. I hope it will be helpful to friends in need!

The above is the detailed content of Use of v-for list rendering instructions in Vue.js (code example). For more information, please follow other related articles on the PHP Chinese website!