vue 菜单列表图片的选中与变化

// 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自己写咯