[Vue.js]v-forディレクティブで配列要素を取得するサンプル

構文
<li v-for="item in 配列名" :key="item.key">
htmlコード

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<ul id="arkgame">
<li v-for="item in items" :key="item.key">
{{ item.key }}
</li>
</ul>
<ul id="arkgame"> <li v-for="item in items" :key="item.key"> {{ item.key }} </li> </ul>
<ul id="arkgame">
  <li v-for="item in items" :key="item.key">
    {{ item.key }}
  </li>
</ul>

JSコード

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
var cft = new Vue({
el: '#arkgame',
data: {
items: [
{ key: 'A001' },
{ key: 'B002' }
]
}
})
var cft = new Vue({ el: '#arkgame', data: { items: [ { key: 'A001' }, { key: 'B002' } ] } })
var cft = new Vue({
  el: '#arkgame',
  data: {
    items: [
      { key: 'A001' },
      { key: 'B002' }
    ]
  }
})

 

Vue.js

Posted by arkgame