<div class="cardbox">
<div :class="linstindex === index ? 'cad2':'cad1'" @click="cad(index)" v-for="(item,index) in list"
:key="index" v-bind:style="{ 'background-image': 'url(' + item.img + ')', }">
</div>
</div>
<script>
export default {
data() {
return {
list: [{
img: 'https://gd-hbimg.huaban.com/9ede6b7ffbfbcef23400e03548900d76480774abae24e-p4SdeM_fw658webp',
cla:'run'
},
{
img: 'https://gd-hbimg.huaban.com/9ede6b7ffbfbcef23400e03548900d76480774abae24e-p4SdeM_fw658webp',
cla:'run'
},
{
img: 'https://gd-hbimg.huaban.com/9ede6b7ffbfbcef23400e03548900d76480774abae24e-p4SdeM_fw658webp',
cla:'run'
}
],
linstindex: '',
num: 0,
}
},
mounted() {
},
methods: {
cad(index) {
if(this.linstindex === index){
if (this.num % 2 != 0) {
console.log(1)
this.linstindex = index
} else {
this.linstindex = ''
console.log(2)
}
// this.num++
console.log(this.num,'num')
}else{
this.linstindex = index
}
}
}
}
</script>
.cardbox {
width: 100vw;
height: 50vh;
display: flex;
align-items: center;
justify-content: center;
.cad1 {
width: 20vw;
height: 40vh;
margin-left: 2vw;
animation-name: zun;
animation-duration: 1s;
}
.cad2 {
width: 30vw;
height: 40vh;
margin-left: 2vw;
animation-name: run;
animation-duration: 1s;
}
@keyframes run {
from {
width:20vw ;
}
to {
width:30vw ;
}
}
@keyframes zun {
from {
width:30vw ;
}
to {
width:20vw ;
}
}
}