So implementieren Sie die Tab-Funktion am einfachsten in Vue

In unserer Entwicklung, insbesondere auf dem mobilen Endgerät, muss häufig eine Anforderung wie die Registerkarte angetroffen werden. Wie können wir also einfach eine solche Funktion implementieren?

Viele Kinderschuhe werden sicherlich sagen, dass es sehr einfach ist, wenn das angeklickte oder gefundene Seitenbild durch ein angeklicktes Effektbild ersetzt wird und dann jedes Teil kopiert wird. Dies kann erreicht werden, ist aber sehr mühsam. Im Folgenden stelle ich eine einfache Implementierung einer einfacheren Methode vor

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