Vue的v-for和v-bind实现列表颜色切换

需求：

1. 在页面上显示四个列表，初始时字体为黑色。
2. 鼠标点击某一个列表时，该列表的颜色变为红色，其余列表仍为黑色。

代码实现：

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


<div id="app">
  <ul>
    <li v-for="item,index in movies" :class="{red: changeRed == index}" v-on:click="change(index)">{{item}}li>
  ul>
div>


<script src="../JS/vue.js">script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      movies: ['肖申克的救赎','泰坦尼克号','当幸福来敲门','流浪地球'],
      changeRed: -1
    },
    methods: {
      change:function (index) {
        this.changeRed=index;
      }
    }
  })
script>

代码解释：

• 首先浏览器直接显示列表，因为此时没有监听到click事件。
• 当鼠标点击某一个列表时，Vue自动获取列表下标，并执行change(index)函数，改变changeRed的值，此时当前列表的v-bind:class="{red: changeRed == index}"中的red为true，当前一项列表显示为红色。其余列表的changeRed == index为false，所以不显示红色。