Vueでタブ機能を最も簡単に実装する方法

私たちの開発では、特にモバイル端末では、タブのような要件が頻繁に発生する必要がありますが、どうすればそのような機能を簡単に実装できますか？

多くの子供靴は確かにそれが非常に簡単であると言うでしょう、クリックまたは見つけられたページの写真をクリックされた効果の写真に置き換えて、それから各部分をコピーするとき、これは達成できますが、それは非常に面倒です。以下に、より単純なメソッドの簡単な実装を紹介します

<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>