Como implementar a função de guia no Vue mais fácil

Em nosso desenvolvimento, especialmente no terminal móvel, um requisito como guia deve ser encontrado com frequência, então, como podemos simplesmente implementar tal função?

Muitos calçados infantis certamente dirão que é muito simples, quando a imagem da página clicada ou localizada é substituída por uma imagem do efeito clicado, e então cada parte é copiada, isso pode ser conseguido, mas é muito problemático. Abaixo, apresento uma implementação simples de um método mais simples

<template>
	  <ul class="nav">
		   <li v-for="(item,index)" in list :key="index" @click="tab(index)">
		       <img	:src="item.clickImg" alt="logo' v-if="index===nowIndex">
		       <img	:src="item.imgurl  alt="logo' v-else>
		       <span>{
   
   {item.name}}</span>
		   </li>
	 </ul>
</template>
<script>
    import Weixin from './images/weixin.png'
    import Weixins from './images/weixin-s.png'
    import AddressBook from './images/addressBook .png'
    import AddressBooks from './images/addressBook-s.png'
    import Discover  from './images/discover.png'
    import Discovers  from './images/discover-s.png'
    import Mine from './images/mine.png'
    import Mines from './images/mine-s.png'
  export default{
      data(){
           return{
             nowIndex:0,
             list:[
	             {
	               name:"微信“，
	               imgUrl:Weixin  ,
	               clickImg:Weixins 
	              },
	                 {
	               name:"通讯录“，
	               imgUrl:AddressBook ,
	               clickImg:AddressBooks 
	              },
	                 {
	               name:"发现“，
	               imgUrl:Discover ,
	               clickImg:Discovers 
	              },
	                 {
	               name:"我“，
	               imgUrl:Mine,
	               clickImg:Mines
	              }
           ]
           }
          },
          methods:{
             tab(index){
               this.nowIndex=index
             }
          }
        }
</script>