Vue学习(基础编)——v-for小练习 vue中v-for的用法

在我的上一篇中讲了v-for的基本使用，今天我们写个小作业来巩固下这个知识，我们先来看下这个作业需要实现的效果。

要求循环一系列数据，然后点哪条数据，哪条数据就变红。

1 首先，我们先展示这些数据，代码如下，展示数据很简单，我这就不多说了，这里我们需要用到数组的标签，所以需要把index也写出来。

2 其次，我们实现把第一条数据给变红，我们先定义个变红的样式，我们来看代码：

我们在data中定义个属性：currentIndex=0，这里我们使用v-bind绑定class数组语法，当

index == currentIndex为true时，展示这个变红的样式，实现效果如下：

3 最后，我们增加点击方法，动态的改变currentIndex的值，便可以实现效果了，我们来看下代码：

用@click绑定liclick方法，这里我们需要把每条数据的index传到方法里，然后在方法里把currentIndex改为index，便可以实现效果，效果就像文章开头时那样。

如果我又讲的不好的地方，欢迎大家指正，我们下次见！