Sample List

【Vue.js】No.011 JavaScript・jQuery・Vue.jsで同じ処理をしてみた2

概要

今回のサンプルでは「要素を追加する」という点にポイントを絞ってサンプルを作ってみたいと思います。

中身が空のul要素があり、その中にliを追加していくという形にしてみます。以下のようなイメージですね。 

<ul class="test">
  <!-- JSによりliが追加される -->
</ul>

コードサンプル

JavaScript / jQuery / Vue.jsそれぞれの書き方でコードサンプルを書いてみたいと思います。

JavaScript

var list = ['リスト1', 'リスト2', 'リスト3'],
    ul   = document.querySelector( '.test' );
for( var i = 0; i < list.length; i++ ){
  ul.insertAdjacentHTML( 'beforeend', '<li>'+list[i]+'</li>' );
}

jQuery

$( function(){
  var list = ['リスト1', 'リスト2', 'リスト3'],
      ul   = $( '.test' );
  for( var i = 0; i < list.length; i++ ){
    ul.append( '<li>'+list[i]+'</li>' );
  }
} );

Vue.js

Vue.jsの場合は「v-for」というのを使用するため、若干HTML側にも調整が必要です。
以下のようになりますね。 

<ul class="test">
  <li v-for="list in lists">
    {{ list }}
  </li>
</ul>

「listsっていう配列をループさせますよ」という意味合いになります。
JSは以下のようになります。 

new Vue( {
  el: '.test',
  data: {
    lists: [
      'リスト1',
      'リスト2',
      'リスト3'
    ]
  }
} );

結果

結果というほどのアレもありませんが…以下のようなul > liが生成される形になりますね。 

<ul class="test">
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>
一覧に戻る