小編給大家分享一下vue.js中怎么使用v-for，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

專注于為中小企業(yè)提供網(wǎng)站制作、網(wǎng)站建設(shè)服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)慈溪免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了上千余家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

2.x版本：

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

index即索引值。

==========================分割線==============================

1.x版本：

1.v-for

　示例一：

    
    
    
    

        

            

                {{ tab.text }}            
        
    

    
    

2.索引

　在 v-for 塊內(nèi)我們能完全訪問父組件作用域內(nèi)的屬性，特殊變量 $index是當(dāng)前數(shù)組元素的索引：

  

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

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

　另外，你可以為索引指定一個別名（如果 v-for 用于一個對象，則可以為對象的鍵指定一個別名）：

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

從 1.0.17 開始可以使用 of 分隔符，更接近 JavaScript 遍歷器語法：

　示例二：

    
    
    
    

        

            
Text:{{option.text}}--Vlue:{{option.value}}
        
    
    

        你點擊的索引為: {{ click }}
    
    

        
試著點擊上方LI條目
    

    
    

3.在點擊事件中取到索引

　方法一：添加自定義屬性

　示例三：

    
        
        
        
    
    
        

               {{ item.text }}
        
        
    
    
    

　方法二：直接傳入索引值

　示例四（和二差不多）：

    {{ item.text }}


    

　效果與方法一相同。

　不過有鏈接時：

　與取索引雖然不沖突，但是如果要對所跳的鏈接做進(jìn)一步操作，則無法阻止跳轉(zhuǎn)事件：

　如果想直接傳索引可以用以下方法：

　示例五：

    
        
        
        
    
    
        

               {{ item.text }}
        
        
    
    
    

補充：

4.關(guān)于v-for版本2.0與1.x的區(qū)別

　2.0版本的示例五：

    
        
        
        
    
    
        

            {{ index }}{{ item.text }}
        
        
    
    
    

　變化如下：

1. el處需id，寫body報錯；
2. 參數(shù)index需寫在item后面；
3. 作為事件參數(shù)時不用加$符。

　此外，也可以提供第二個的參數(shù)為鍵名：

  {{ key }} : {{ value }}

　第三個參數(shù)為索引：

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

看完了這篇文章，相信你對vue.js中怎么使用v-for有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！