要求：第一个li显示红色，之后点击哪个li哪个li就变成红色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.one{
color: red;
}
.o{
cursor: pointer;
}
</style>
</head>
<body>
<div id="div">
<ul>
<li v-for="(items,index) in li" :class="{one:currentIndex===index}" v-on:click="cli(index)" class="o">
{{items}}
</li>
</ul>
</div>
</body>
</html>
<script src="vue.js"></script>
<script>
const div = new Vue({
el:'#div',
data:{
li:['祝你','万事胜意','祝你','前程似锦','一帆风顺'],
isone:true,
currentIndex : 0
},
methods:{
cli:function(index){
this.currentIndex=index
}
}
})
</script>
methods:{
cli:function(index){
this.currentIndex=index
}
}
把每个li的index传入这个函数中让currentlindex等于点击的这个li的index值
:class="{one:currentIndex===index}
这个当one：ture时就显示这个样式，one:currentIndex===index当哪个li的索引跟currentlindex所匹配就相当于true其他的九尾flash为true的就变红，为flash的就不变红
如果:class="{one:true}的话每个li都是true所以每个li都变红，每个li的索引值不同，可以利用他们不同的索引来控制他们的颜色