##やりたいこと
DBからひっぱってきたデータをvueのコンポーネントの中のdataにセットし、それをv-forで表示させているとします。
DBからひっぱってきたデータのいずれかに真偽値を設定するなどしておけばv-forの中で動きの変化はつけることができますが、
「そのコンポーネントの中だけのdataを追加し、v-forの中の特定のコンテンツだけclassをつける」などの変化をつけたい場合にやる方法。

##記述内容


//描写部分

<template>
 <div>
  <div v-for="task in tasks" :key="task.id">
  　<div class="task__title">{{task.title}}</div>
　　//例えばこのtask.bodyだけ、条件に応じてis-activeclassをつけたい場合
  　<div class="task__body" v-bind:class="{'is-active':active === task}" >{{task.body}}
　</div>
　<button v-on:click="addActive(task)">bodyにclassをつける</button>

 </div>
</template>


<script>
export default {
　data(){
         return{
                tasks:[ ],//この中にdbからひっぱってきたデータが入っている
                active:null   
            }
        },
　methods:{
          addActive(task){
           if(this.active === task){
             this.active = null;
           }else{
            this.active = task;
           }
          }
        }
}
</script>

こんな感じで、v-forの中の値（task）を引数として渡すことで、そのactiveをtaskにすることができる。
これにより特定のtaskだけにclassを適用できる。