vue.js指令v-for使用及索引獲取

高洛峰
發布: 2016-12-08 09:43:55
原創
1986 人瀏覽過

1.v-for

  直接上代碼。

範例一:

      
  • {{ tab.text }}
登入後複製

2.索引

  在v-for 塊內我們能完全訪問父組件它是目前陣列元素的索引:

  • {{ parentMessage }} - {{ $index }} - {{ item.message }}
登入後複製

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

  另外,你可以為索引符號的一個字

{{ index }} {{ item.message }}
登入後複製

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

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

你点击的索引为: {{ click }}

试着点击上方LI条目

登入後複製

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

方法一:新增自訂屬性

範例三:

      
登入後複製

例四(和二差不多):

      
登入後複製

  效果與方法一相同。

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

範例五:

      
登入後複製

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn