實現(xiàn)按鈕圖片的狀態(tài)改變卖怜，要求：同一時間能只有一個按鈕處于選中狀態(tài)烹骨。
<div class="play-btn">
<img
v-for="(item,index) in imgList"
:key="index"
:src="activeIndex === index ? item.img2 : item.img1"
@click="changeColor(index)"
/>
</div>
export default {
name: "Control",
data() {
return {
activeIndex: 0,
imgList: [
{
img1: require("../../assets/image/index/suspend_02.png"),
img2: require("../../assets/image/index/suspend_01.png"),
},
{
img1: require("../../assets/image/index/play_02.png"),
img2: require("../../assets/image/index/play_01.png"),
},
{
img1: require("../../assets/image/index/stop_02.png"),
img2: require("../../assets/image/index/stop_01.png"),
},
],
};
},
methods: {
// 播放功能按鈕狀態(tài)改變
changeColor(index) {
console.log(index);
this.activeIndex = index;
},
},
mounted() {
mainFn();
},
};
大可教的方法
