Vue.jsで繰り返し表示し、特定のデータに色をつける

スポンサーリンク
Pocket
LINEで送る

何を作るのか?

Vue.jsを使い配列データを繰り返し表示し、クリックした要素のみ色を変えるというものを作っていきます。
Screenshot_from_2016-06-17 02:36:15

コード

今回はv-bind:class,v-for,v-on:clickこの3つのディレクティブを使っていきます。
まずはデモ

html

<ul id="demo">
  <li v-for="item in items">
    <div class="btn" v-on:click="btnClick($index)" v-bind:class="isActive($index)">{{item.name}}:{{item.message}}</div>
  </li>
</ul>

javascript

window.onload = function() {  
var vm = new Vue({
  el: '#demo',
  data: {
    isActive:false,
    items: [
      {name: 'item_foo1', message: 'Foo1' },
      {name: 'item_bar1', message: 'Bar1' },
      {name: 'item_foo2', message: 'Foo2' },
      {name: 'item_bar2', message: 'Bar2' },
      {name: 'item_foo3', message: 'Foo3' },
      {name: 'item_bar3', message: 'Bar3' },
      {name: 'item_foo4', message: 'Foo4' },
      {name: 'item_bar4', message: 'Bar4' },
      {name: 'item_foo5', message: 'Foo5' },
      {name: 'item_bar5', message: 'Bar5' },
      {name: 'item_foo6', message: 'Foo6' },
      {name: 'item_bar6', message: 'Bar6' },
      {name: 'item_foo7', message: 'Foo7' },
      {name: 'item_bar7', message: 'Bar7' },
      {name: 'item_foo8', message: 'Foo8' },
      {name: 'item_bar8', message: 'Bar8' }
    ]
  },
  methods:{
    btnClick:function(event_index){
      this.isActive = function(index){
       if(event_index == index){
         return "active";
       }
      }
    }
  }
})
}

css

.btn{
  display:inline-block;
  padding: 10px;
  margin-top: -1px;
  border: solid 1px #dcdcdc;
  cursor: pointer;
}
.btn.active{
  background: #3ed37d;
  color: #fff;
}

解説

v-for=”item in items”で配列を表示させていきます。
rubyのeach、phpのforeachと同じものですね。
ループ中はitem.nameやitem.messageでアクセスができます。
これはangularjsなどにも同様にある機能です。

スポンサーリンク

クリックした時に色をつけたいので要素にv-on:click=”btnClick($index)”とv-bind:class=”isActive($index)”を書いときます。
引数に$indexを渡しています。
forのループ中は$indexで何ループ目かにアクセスできます。

btnClick:function(event_index){
  this.isActive = function(index){
   if(event_index == index){
     return "active";
   }
  }
}

ボタンをクリックしたときの処理です。
thisでvmインスタンスにアクセスできます。
v-bind:classのisActiveがtrueになったとき”active”というclassを要素に付与され色が変わります。

デモはこちら