VUE列表渲染，鼠标点击颜色切换

知识点：v-bind绑定对象，通过记录列表对象的index，动态调整class样式，完成鼠标点击颜色切换的功能。

1.Dom样式：

<div id="app">
<!--    v-bind动态绑定class对象-->
    <ul>
        <li v-for="(item,index) in movies" :key="index" :class="{active:ind==index}"
            @click="changeBkg(index)" >{{index + ': ' + item}}</li>
    </ul>
</div>

2.vue处理

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            ind:'',
            movies:["海王","初恋这件小事","星际穿越","大话西游","盗梦空间"]
        },
        methods:{
            changeBkg:function (index) {
                this.ind=index;
            }
        }
    })
</script>

3.简单的active样式

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