vue学习视频链接
记录一下：点击可动态切换颜色。

代码

    <div id="app">
        <ul>
            <li v-for="(item,index) in movies" 
            :class="{active:currentIndex === index}"
            @click="liclick(index)">
            <!-- === 类似于 == -->
                {{index}}.{{item}}
            </li>
        </ul>
    </div>
    <script src="/LocalCode/VueDemo/vue_test1/jar/vue.js"></script>
    <script>
    const app=new Vue({
        el:'#app',
        data:{
            movies:['海贼王','死神','火影忍者'],
            currentIndex:0
        },
        methods:{
        <!--监听点击事件获取参数index-->
            liclick(index){
                this.currentIndex=index
            }
        }
    })
    </script>

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

原为 active:true，active 这个 class 存在与否将取决于是否为true。
运行后显示的效果是全部变色，说明已经被写死，改为动态的就是新增一个变量currentIndex即可。
当点击到哪一个数据就返回此数据的index，index绑定点击事件@click:liclick(index)
active:currentIndex === index