这可能是一个对于任何js开发者来说都非常简单的问题，或者根本谈不上被叫做“问题”，“基操”而已。但是，很遗憾，我为此开了个篇幅简略记录下它，因为这是我处于前端开发基础阶段数次阻滞过我的问题，以下暂提供一种解决方案，后续可能补充。
这类问题多见于单页面应用（SPA）中的侧边栏、表格列等，当我曾拿到这个需求时，我以为我能用Vue中介绍的Class动态绑定来解决，事实上的确如此，但我用错了，请看我错误的解决方法：
HTML
<template>
<!-- 点击某个绑定样式 -->
<ul>
<li v-for="(data, index) in formData" :key="data.id" :class="{active: isActive}" @click="currentInfo(data, index)">name: {{data.name}}，age: {{data.age}}
</li>
</ul>
</template>
JavaScript
<script>
export default {
name: 'classActive'
data() {
return {
isActive: false, // 用来判断active样式类是否显示
formData: [{
id: 1,
name: 'zhangsan',
age: 20
},{
id: 2,
name: 'lisi',
age: 21
},{
id: 3,
name: 'wangwu',
age: 22
}
}
}
methods: {
currentInfo(data, index) {
if(data.id-1 === index) { // 当前选择的列表项与列表id号相等则绑定active
this.isActive = true;
}
}
}
}
</script>
Style
<style scoped>
li {
list-style: none;
border: 1px solid #333;
}
.active {
background: light-gray;
}
</style>
好，于是我兴冲冲地切回页面看效果，结果：
image.png
当我点击其中的一行时，结果所有的
li都绑上了active样式，稍微想一下，相信大家都能找到问题所在，所有li的样式都由一个isActive控制，当我点击一行，全局变量isActive变为ture，当然所有的li都会绑上啦！然后我就停滞下来，思索一番，想过在data数组各项里插入一个标识用来单独控制，但被我否决了，一来对象中插入属性麻烦，二来污染数据源。于是，便有了下面我要说的解决方法：
HTML
<template>
<!-- 点击某个绑定样式 -->
<ul>
<li v-for="(data, index) in formData" :key="data.id" :class="currentClass(index)" @click="currentInfo(index)">name: {{data.name}}，age: {{data.age}}
</li>
</ul>
</template>
JavaScript
<script>
export default {
name: 'classActive'
data() {
return {
currentNumber: 0, // 用来判断active样式类是否显示
formData: [{
id: 1,
name: 'zhangsan',
age: 20
},{
id: 2,
name: 'lisi',
age: 21
},{
id: 3,
name: 'wangwu',
age: 22
}
}
}
methods: {
currentInfo(index) {
this.currentNumber = index;
},
currentClass(index) {
return [this.currentNumber == index ? 'active' : ''];
}
}
}
</script>
Style
<style scoped>
li {
list-style: none;
border: 1px solid #333;
}
.active {
background: light-gray;
}
</style>
这里，我新建一个变量空间存储当前点击的列表序号index，这样不管怎样点击，这个currentNumber永远是唯一的，那么和它相等的数组项也是唯一的，相等即可绑定active样式了，看效果：
image.png
好，以上就解决了遍历数组点击动态绑定样式，以后我找到更好的，我会补充，也非常欢迎大家在评论里给出更好的建议。
