vue 实现点击元素 改变该元素样式，点击过的元素，样式不移除
在写项目时 一般的需求都是点击当前元素 改变该元素样式 点击下一个元素 其余元素样式恢复原状，但最近遇到一个需求是，点击元素 改变该元素字体颜色 点击下一个元素 上一次点击过的元素字体颜色还存在。
这里的代码给出两种效果，第一种是类似于a链接的visited效果，二次点击该元素，已经改变过的样式不会再改变。第二种是样式切换效果，二次点击该元素，之前改变的样式移除。
<style>
.list li {
cursor: pointer;
color: #000;
font-size: 20px;
font-weight: bold;
margin-left:20px;
}
.active {
color: red !important;
}
</style>
<body>
<div id="app">
<ul class="list">
<li v-for="(item, index) in list" :key="index" @click="changeStyle(index)" :class="{active: checkedGroup.indexOf(index) > -1}">
{{item}}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
list: ['项目一','项目二','项目三'],
checkedGroup: []
},
methods: {
changeStyle(index) {
if(this.checkedGroup.indexOf(index) == -1) {
this.checkedGroup.push(index); //实现第一种效果只需要这句代码 实现第二种效果就要加上外面的判断条件
}else {
var spliceIndex = this.checkedGroup.indexOf(index);
this.checkedGroup.splice(spliceIndex, 1);
}
}
}
})
</script>
</body>
点击过的元素，样式改变
