2021-07-29vue-cli点击一行，此行变红色的三种方法

方法一：直接getElementById修改。

<template>
<div>
  <ul>
    <li v-for="item,index in message" :id="index"  v-on:click="change(index)">{{item}}</li>
  </ul>

</div>
    </template>
<script>
export default {
data(){
  return{
     message: ['肖申克的救赎','泰坦尼克号','当幸福来敲门','流浪地球'],
  }
},
methods:{

  change(index){
    document.getElementById(index).style.color = "red"
  }
}

}
</script>
<style>
  .red{
    color: red;
  }
</style>

方法二：数组变化法，这里注意由于数组通过索引值变化数值，会导致监听不到变化，所以我们push，pop一下数组即可完成监听事件。

<template>
<div>
  <!-- :class="{red: clickingIndex == index}" -->


     <ul>
    <li v-for="item,index in message" :class="{red:fun(index)}" v-on:click="change(index)">{{item}}</li>
  </ul>

</div>
    </template>
<script>
export default {
data(){
  return{
     message: ['肖申克的救赎','泰坦尼克号','当幸福来敲门','流浪地球'],
     clickingIndex: [false,false,false,false],
  }
},
watch:{
  'clickingIndex':{
    deep:true,
    handler:function(){
      debugger
    }
  }
},
methods:{
  fun(index){

    if(this.clickingIndex[index]){
      return true
    }
  },
  change(index){
    this.clickingIndex[index] = true
    this.clickingIndex.push(false)
    this.clickingIndex.pop()
    
  }
}

}
</script>
<style>
  .red{
    color: red;
  }
</style>

方法三：与上面方法思路一致，因为监听不到数组变化，所以我们也可以设置一个变量cli来实现此效果 ，值得一提的是这种方法改编于vue点击一行切换颜色的题目。

<template>
<div>
  <!-- :class="{red: clickingIndex == index}" -->


     <ul>
    <li v-for="item,index in message" :class="{red:fun(index)}" v-on:click="change(index)">{{item}}</li>
  </ul>

</div>
    </template>
<script>
export default {
data(){
  return{
     message: ['肖申克的救赎','泰坦尼克号','当幸福来敲门','流浪地球'],
     clickingIndex: [false,false,false,false],
     cli:-1
  }
},
methods:{
  fun(index){
    if(index===this.cli){
      return true
    }
    if(this.clickingIndex[index]){
      return true
    }
  },
  change(index){
    this.clickingIndex[index]=true
    this.cli=index
    
  }
}

}
</script>
<style>
  .red{
    color: red;
  }
</style>