【Vue.js】No.002 よく使いそうな条件分岐やループ

まずは条件分岐から

例えば要素の有無を切り替えたい場合、HTMLは以下のように。

<div id="test">
  <p v-if="show">要素の有無が切り替わる</p>
</div>

続いてJSです。

var test = new Vue({
  el: '#test',
  data: {
    show: true
  }
} );

要素の有無が切り替わる

上記コードでは show: true ですが、この部分を show: false にすると「要素の有無が切り替わる」というpタグは無くなります。

続いてループ処理

以下のようにリストコーディングをしてみたとします。

<div id="test2">
  <ul>
    <li v-for="artist in artists">
      {{ artist.name }}
    </li>
  </ul>
</div>

続いて、JS側では以下のように配列を定義してみます。

var test2 = new Vue( {
  el: '#test2',
  data: {
    artists: [
      { name: 'Acid Black Cherry' },
      { name: 'Janne Da Arc' },
      { name: 'BREAKERZ' }
    ]
  }
} );

このようにすることで、以下のようにHTMLが出力されます。

{{ artist.name }}

一覧に戻る