<style>
.red {
color: red;
}
</style>
<body>
<div id="app">
<ul>
<li v-for="(i , index ) in list" @click="changeLi(index)" :class="{red:redIndex==index}"> {{ i }} </li>
<!-- :class="{red:redIndex==index}" 动态添加类名为 red 当redIndex==index的时候就添加red类 -->
</ul>
</div>
<script src='https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js'></script>
<script>
const app = new Vue({
el: '#app',
data: {
list: ['海王', '火影忍者', '海尔兄弟', '进击的巨人'],
redIndex: -1 // 先用这个变量存储index的初始值
},
methods: {
changeLi: function(index) { // 把当前点击的index传进来
this.redIndex = index; // 点击哪个li就让初始值等于当前的Li的index
}
}
})
</script>
</body>
