vue v-for出来的列表，点击当前，当前被点击的字体变颜色（：class）

本文转载于：https://blog.csdn.net/jeff_luyiduan/article/details/89468289

<template>
  <div>
    <div v-for="(item , index) in movies" @click="changSemester(index)" :key="index"
         :class="{blue:i===index}">
      <p>{{ item.name }}</p>
    </div>
  </div>
</template>
 
<script>
  export default {
    data() {
      return {
        movies:['送你一朵小红花','你好，李焕英','唐人街探案3'],
        i: 0
      }
    },
    methods: {
      //点击改变文字颜色
      changSemester(index) {
        this.i = index;
      }
    },
  }
</script>
 
<style scoped>
  /*点击文字变颜色*/
  .blue {
    color: blue;
  }
</style>