vue.js instruction v-for usage and index acquisition

1.v-for

　 Directly upload the code.

Example 1:

      
  
 
 
 {{ tab.text }} 
 
 
    

2. Index

Within the v-for block we can fully access the properties in the parent component scope, and there is also a special variable $index, as you guessed, It is the index of the current array element:

 
 {{ parentMessage }} - {{ $index }} - {{ item.message }} 
 

var example2 = new Vue({ el: '#example-2', data: { parentMessage: 'Parent', items: [ { message: 'Foo' }, { message: 'Bar' } ] } })

Alternatively, you can specify an alias for the index (if v-for is used with an object, you can specify an alias for the object's key):

 {{ index }} {{ item.message }} 

Starting from 1.0.17, you can use the of delimiter, which is closer to JavaScript traverser syntax:

Example Two:

      
  
 
 
Text:{{option.text}}--Vlue:{{option.value}}
 
 
 
 你点击的索引为: {{ click }} 
 
 
试着点击上方LI条目
 
    

3. Get the index in the click event

Method 1: Add custom attributes

Example 3:

      
  
 {{ item.text }} 
     

Method 2: Directly pass in the index Value

Example 4 (similar to 2):

      
  
 {{ item.text }} 
     

　 The effect is the same as method 1.

If you want to directly transfer the index, you can use the following method:

Example 5:

      
  
 {{ item.text }}