Vue 点击列表中某一个变色案例

v-bind v-for v-on的使用
题目要求：
完成一个有序列表，鼠标点击其中某一项，该项字体颜色变红

html.

<div id="app">
            <ul>
                <li v-for="(movie,index) in movies":class="{active:index===getIndex}"v-on:click="onClick(index)"> {{index}}--{{movie}}</li>
            </ul>
</div>

将点击事件获取到的Index的值附给getIndex,此时Index与getIndex相等触发active，点击的项变色，

也可将getIndex的值直接附为空,这样初始页面将没有红色的项目

js

const vm = new Vue({
                el: '#app',
                data: {
                    isActive: true,
                    getIndex: 0,
                    movies: ['初吻','海上钢琴师','教父','以你的名字呼唤我']
                },
                methods: {
                    onClick:function(index){
                        this.getIndex = index;
                    }
                }
            })

css

.active{
                color: red;
            }