// 1. template结构
<div
class="menu"
v-for="(to, toIndex) in menuList"
:key="toIndex"
@click="toReg(to.index)"
>
<img :src="getMenuImage(to, to.index)" alt="" />
</div>
//2. 存放图片的地方 我是用的js文件
export const menuList = [
{
isSrc: selectTabs1,
index: 0,
noSrc: noSelectTabs1,
},
{
isSrc: selectTabs2,
index: 1,
noSrc: noSelectTabs2,
},
{
isSrc: selectTabs3,
index: 2,
noSrc: noSelectTabs3,
},
{
isSrc: selectTabs5,
index: 3,
noSrc: noSelectTabs5,
},
{
isSrc: selectTabs4,
noSrc: noSelectTabs4,
index: 4,
},
]
//3. 方法
methods: {
//pageNum 就是索引 点击了1 索引的图片就是选中的图片
getMenuImage(image, index) {
return index === this.pageNum ? image.isSrc : image.noSrc;
},}
//4. css自己写咯
vue 菜单列表图片的选中与变化
最新推荐文章于 2024-04-24 16:02:44 发布