Vue实现点击列表中的某个文字就改变其颜色

index.html

<div class="me">
        <h2>我喜好的女神【日本系列】：</h2>
        <ul>
            <li v-for="(i,index) in lists" :class="getClasses(index)" v-on:click="myClick(index)">{{i}}</li>
        </ul>
    </div>

render.css

.myList{
    color: #80b5ea; //淡蓝色
}

demo.js

const me = new Vue({
    el: '.me',
    data: {
        lists: ['石原里美', '桥本环奈', '斋藤飞鸟', '新恒结衣'],
        num: -1
    },
    methods:{
        getClasses: function (index) {
            return {myList: index === this.num}
        },
        myClick: function (index){
            this.num = index;
            //只有鼠标点击的内容才会this.num = index，而只有index值和num值相等，才会实现{myList: true}，被鼠标选中的文字内容才会使用render.css的样式
        }
    }
})

运行效果：