vue.jsでリストレンダリング

vue.jsでリストレンダリングをやってみる

vue.js側に設定した配列に格納された要素全てをテンプレート側にレンダリングして表示する。
ブラウザ場でjsの実行環境を利用できるサービス jsfiddle を利用する。

基本形

dataプロパティ内の要素をv-forディレクティブで表示する。

配列に基づいて、アイテムのリストを描画するために、v-for ディレクティブを使用することができます。v-for ディレクティブは item in items の形式で特別な構文を要求し、items はソースデータの配列で、item は配列要素がその上で反復されているエイリアスです:

https://jp.vuejs.org/

上記vue公式にある通り、v-forディレクティブを利用する場合は、配列要素を代入する変数 in 配列名となる

<div id="app">
<ul>
  <li v-for="item in items">{{item}}</li>
</ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

var app = new Vue({
    el:'#app',
  data:{
    items:["item1", "item2", "item3"]
  }
})

実行結果

配列に格納されたオブジェクトのキーを指定して表示する。

使い所すくなそう

<div id="app">
<ul>
  <li v-for="item in items">{{item.message}}</li>
</ul>
</div>

var app = new Vue({
    el:'#app',
  data:{
    items:[
        {message: 'foo'},
        {message: 'var'}
    ]
  }
})

実行結果

リストレンダリングの結果に配列の添字を表示する

(配列要素を代入する変数, index) in 配列名とすることでindexに添字を代入できる

div id="app">
<ul>
  <li v-for="(item, index) in items">{{item.message}} {{index}}</li>
</ul>
</div>

var app = new Vue({
    el:'#app',
  data:{
    items:[
        {message: 'foo'},
      {message: 'var'},
      {message: 'hoge'},
      {message: 'hogege'}
    ]
  }
})

実行結果

オブジェクトの要素をリストレンダリングする

基本的には配列の場合と同様に(オブジェクトのvalueを代入する変数) in オブジェクト名と書く

<div id="app">
<ul>
  <li v-for="value in objects">{{value}}</li>
</ul>
</div>

var app = new Vue({
    el:'#app',
  data:{
    objects:{
        object1: 'foo',
      object2: 'var',
      object3: 'hoge',
      object4: 'hogege'
    }
  }
})

オブジェクトのキー名とvalueを併せてリストレンダリング

<div id="app">
<ul> 
  <li v-for="(value, index) in objects">{{index}}:{{value}}</li>
</ul>
</div>

var app = new Vue({
    el:'#app',
  data:{
    objects:{
        object1: 'foo',
      object2: 'var',
      object3: 'hoge',
      object4: 'hogege'
    }
  }
})

実行結果