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

需求：

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

代码实现：

<!-- css --><style>.red{color: red;}</style><!-- html --><divid="app"><ul><liv-for="item,index in movies":class="{red: changeRed == index}"v-on:click="change(index)">{{item}}</li></ul></div><!-- JavaScript --><scriptsrc="../JS/vue.js"></script><script>const app=newVue({     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，所以不显示红色。