绑定图片切换

需求：导航栏功能键为图片，选中状态和未选中状态下显示两种不同的图片，即点击选中进行图片显示的切换

HTML代码：

    v-for="item in headerData"

    :key="item.path"

    @click="handleSelect(item.path)"

  >

   

    //绑定图片、图标显示   

script代码：

export default {

    data () {

        return {

            activeIndex: '跳转路由1'  // 默认为当前路由1 的页面 

            headerData: [

                {picture: require('@/assets/img/home.png'), cPicture: require('@/assets/img/cHome.png'), path:'跳转路由1'},

                {picture: require('@/assets/img/daily.png'), cPicture: require('@/assets/img/cDaily.png'), path:'https://www.baidu.com/'}

            ],

        }

    },

    methods: {

        handleSelect (path) {

           this.activeIndex = path  // 发生点击事件时，将跳转的路径赋给activeIndex 

            if (path ==='跳转路由1') {

                this.$router.push(path)         //  在当前工程路由中跳转 不刷新网页

            }else {

                window.location.href = path    //  可以跳转其他网址

            }

        }

     }   

  }