【VUE组件开发】VUE随意点击列表元素切换选中样式，并有序数组添加索引和数值

直接查看代码以及样式

[code]<template>
<div>
<!--顶部step-->
<div class="dataStep">
<!--<img src="static/images/DataBgc.png" alt="">-->
<div class="step">
<div class="stepText" :class="{nowStepText:nowStep}">选择导出项</div>
<div class="stepItem" :class="{nowStepItem:nowStep}">1</div>
</div>
<div class="step">
<div class="stepText" :class="{nowStepText:!nowStep}">选择导出方式</div>
<div class="stepItem" :class="{nowStepItem:!nowStep}">2</div>
</div>
</div>
<div class="sline"></div>
<!--顶部step-->

<!--选择导出内容-->
<div class="StepContent">
<div class="ContentTitle">请选择要导出的内容</div>
<div class="bline"></div>
<div class="ContentBox">
<div v-for="(item,index) in SelItemData" class="SelItem" :class="{nowSelItem:SelItemData[index].show}"
@click="AddItem(index)" :key="index">{{item.name}}
</div>
</div>
</div>
<!--选择导出内容-->
</div>
</template>

<script>
export default {
data() {
return {
nowStep: true,
SelItemData: [
{show: false, name: "一"},
{show: false, name: "二"},
{show: false, name: "三"},
{show: false, name: "四"},
{show: false, name: "五"},
{show: false, name: "六"},
{show: false, name: "七"}
],
tempNeeds:[],//存needs的索引值
needs: [],//需要导出的内容
}
},

methods: {

AddItem(index) {
/*功能：随意点击任意按钮值，向数组有序的添加元素*/
//判断是否显示
this.SelItemData[index].show = !this.SelItemData[index].show
if(this.SelItemData[index].show){
//如果show=true，就向tempNeeds[]中添加，并重新排序
this.tempNeeds.push(index)
//扩展sort排序
this.tempNeeds.sort(function (a,b) {
return a-b;
})
}else {
//找到该值在tempNeeds中的索引并删除
this.tempNeeds.splice(this.tempNeeds.indexOf(index),1)
}
//每次点击添加或取消元素选择的时候，先清空tempNeeds，再将现在所有选择的元素push到needs
this.needs.splice(0,this.needs.length)
for(var i=0;i<this.tempNeeds.length;i++){
//循环tempNeeds，里面存的是需要存needs的SelItemData数组索引
this.needs.push(this.SelItemData[this.tempNeeds[i]].name)
}

console.log(this.tempNeeds);
console.log(this.needs);
}
}
}
</script>

<style scoped>
/*顶部step*/
.dataStep {
width: 96%;
max-width: 540px; /*no*/
height: 85px;
margin-top: 40px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 2;
}

.dataStep .step {
width: 220px;
height: 85px;
text-align: center;
padding: 0 40px;
}

.dataStep .stepText {
font-family: PingFang-SC-Medium;
font-size: 30px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #ffffff;
opacity: 0.2;
}

.dataStep .stepItem {
width: 42px;
height: 42px;
line-height: 42px;
font-family: PingFang-SC-Medium;
font-size: 28px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #5e5e5e;

background-color: #ffffff;
border: solid 1px #5e5e5e;
margin: 0 auto;
border-radius: 100%;
}

.nowStepText {
color: #007aff !important;
opacity: 1 !important;
}

.nowStepItem {
background-color: #1965fe !important;
color: #ffffff !important;
box-shadow: 0px 3px 7px 0px rgba(18, 18, 75, 0.35);
}

.sline {
width: 96%;
margin: 0 auto;
border-bottom-width: 2px; /*no*/
border-bottom-style: solid;
border-bottom-color: #56568A;
position: relative;
top: -15px;
z-index: 1;
}

/*顶部step*/

/*选择导出内容*/
.bline {
width: 96%;
margin: 0 auto;
/*border-bottom: 5px dashed #56568A;*/
border-bottom-width: 2px; /*no*/
border-bottom-style: dashed;
border-bottom-color: #56568A;
}

.StepContent {
width: 96%;
max-width: 540px; /*no*/
height: 420px;
background-color: #252568;
border-radius: 20px;
margin: 0 auto;
margin-top: 70px;
}

.ContentTitle {
font-family: PingFang-SC-Bold;
font-size: 30px;
font-weight: normal;
font-stretch: normal;
height: 85px;
line-height: 85px;
letter-spacing: 0px;
color: #ffffff;

text-align: center;
}

.ContentBox {
height: 330px;

display: flex;
justify-content: space-between;
flex-wrap: wrap;

box-sizing: border-box;
padding: 30px 20px 0px 20px;
}

.SelItem {
width: 220px;
height: 80px;
line-height: 80;
background-color: #ffffff;
border-radius: 10px;

font-family: PingFang-SC-Medium;
font-size: 30px;
font-weight: normal;
font-stretch: normal;
line-height: 80px;
letter-spacing: 0px;
color: #8d8d8d;
text-align: center;
}

.nowSelItem {
background-color: #037dea !important;
color: #ffffff !important;
}
/*选择导出内容*/

</style>