Vue.js common instructions - tutorial on looping the v-for instruction

This article mainly introduces you to the relevant information about the common instructions of Vue.js, the loop use of v-for instructions. The article introduces it in detail through the example code, which has certain reference and learning value for everyone. Friends who need it Let’s take a look below.

Preface

In Vue.js, the v-for directive requires special syntax in the form of item in items, items is the source dataArrayAnd item is an alias for array element iteration.

v-for can bind data to an array to render a list:

 
 
 {{ site.name }} 
 
 
 

Output:

##Use v-for in template:

Effect:

v-for can iterate data through thepropertiesof an object:

 
 
 {{ value }} 
 
 
 

Effect:

#v-for iterates data through the properties of an object. You can provide the second parameter as the key name:

 
 
 {{ key }} : {{ value }} 
 
 
 

Effect:

#v-for Iterates data through the properties of an object, taking the third parameter as theindex:

 
 
 {{ index }} {{ key }}:{{ value }} 
 
 
 

Effect:

v-for can also loopinteger

 
 
 {{ n }} 
 
 
  

Effect:

1 2 3 4 5 6 7 8 9 10

Summary

The above is the detailed content of Vue.js common instructions - tutorial on looping the v-for instruction. For more information, please follow other related articles on the PHP Chinese website!