Vue如何最简单的实现tab功能

我们在开发中，尤其是在移动端，像tab这种需求肯定是经常遇到，那么怎么简单的实现这么一个功能呢？

很多童鞋肯定会说着很简单，当点击的或者所在的页面图片换成点击效果的图片，然后每个部分复制一份，这样是可以实现，但是很麻烦。下面我介绍一种简单的实现一种更简单的方法

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