vue点击变色

<template>
    <div>
    <router-link to="/w1">点击回去</router-link>
   
      <div v-for="(x,index) in list" v-bind:class="{red:isred===index}" @click="change(index)">
        {{x.id}}-{{x.title}}-{{x.author}}
      </div>
    </div>
</template>

<script>
export default {
  name: 'News',
  data () {
    return {
      list:[{id:1,title:"娱乐新闻",author:"小李"},
      {id:2,title:"军事新闻",author:"小王"},
      {id:3,title:"财经新闻",author:"小张"},],
      isred:-1
    }
  },
  methods: {
    change:function(index){
      this.isred=index
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 .red{
   background-color: red;
 }
</style>