【个人学习·作业01】Vue作业：点击哪一项，该项的文字变红色

css部分

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

网页显示部分

<p>作业</p>
    <div id="app">
        <ul>
            <li v-for="(item,index) in movies" @click='changeColor(index)' :class="{atcive:index==count}">{{item}}</li>
        </ul>
    </div>

JS部分

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: ('#app'),
            data: {
                movies: ['海王', '海尔兄弟', '火影忍者', '进击的巨人'],
                count: -1,//若设为0，则默认第一个项为红字

            },
            methods: {
                changeColor: function(index) {
                    this.count = index;
                }
            }


        })
    </script>

V-for

v-for标签可用来遍历数组，还可以遍历对象的属性

vue2.0新数组语法：
（item，index）in arr

v-for="(item,index) in movies"
//in也可以用of替代

@Click

用来监听事件，并在触发时运行一些javaScript代码。

@click='changeColor(index)'

methods: {
          	changeColor: function(index) {
              this.count = index;
                }
            }

:class="{active:index==count}"

:class :动态绑定class
active ：用来实现实现active点击切换

循环的情况：

1、点击时传入index索引（获取当前点击的是哪个）

@click=“active(index)”

2、将索引值传入class（索引等于几就第几个添加active类）

:class="{active:index==count}"

3、在data里边添加count：0（表示默认第一个添加active类）

data{ count：0 }

4、最后在methods里边添加方法

fountion (index) {
this.count=index
}

5、最后在css中写上active的样式

也可以用三目运算符实现

:class="{count==index ? 'active' :''}"

如果 count==index 为真，则class=active.