<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>