Vue 实现图片在循环中 默认 和 选中 之间的点击切换
html
<ul style="font-size:20px;">
<li
:key="lesson.name"
@click="changeLesson(lesson.name, index)"
style="font-size:20px;"
v-for="(lesson, index) in lessonList"
>
<img
:src="activeIndex === index ? lesson.imgPathSelected : lesson.imgPathDefault"
alt="icon"
/>
<span>{{lesson.name}}</span>
</li>
</ul>
数据格式:
js:
methods: {
changeLesson(name, index) {
this.activeIndex = index
}
},