列表案例（v-for、v-bind：、@click）

电影列表案例
默认第一个li为红色，再点击哪个li，该li字体颜色变红

image.png

思路：初始化currentIndex为0，用作记录第0个li的位置，后点击哪个li，就把该li的位置赋给cuurentIndex
1.用v-bind的对象语法动态绑定class，当currentIndex和当前li的index相同时，才给该li添加active类名。默认的currentIndex为0，只有第一个index为0的li才被添加上active的类名，则实现第一个li字体为红色的默认样式。

image.png image.png

2.利用点击事件，动态给currentIndex赋该li的index值，则点击哪个li，那个li就会被添加上active的类名，完成最终效果

        <div id="app">
            <ul>
                <li v-for="(item,index) in movies" :class="{active:currentIndex===index}" @click="liClick(index)">
                    {{item}}
                </li>
            </ul>
        </div>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            const app = new Vue({
                el: '#app',
                data: {
                    currentIndex: 0,
                    movies: ['大理寺日志','进击的巨人','罗小黑战记','一人之下']
                },
                methods: {
                    liClick(index){
                        this.currentIndex = index;
                    }
                }
            })
        </script>