通过创建i变量来判断index下标控制实现动态效果,直接上代码:
HTML以及JS逻辑代码:
<ul class="uu">
<li v-for="(item,index) in arr" @click="i=index" :key="index" :style="[{background:item},{border:i==index?'3px solid purple':''}]"></li>
</ul>
data() {
return {
arr: ["red", "blue", "black", "pink", "yellow"],
i:-1,
};
},
CSS样式:
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.uu {
width: 100%;
height: 50px;
display: flex;
justify-content: space-around;
margin-top: 30px;
li {
width: 50px;
height: 50px;
border-radius: 50%;
}
}
效果图: