Cómo implementar la función de pestaña en Vue más fácil

En nuestro desarrollo, especialmente en el terminal móvil, un requisito como la pestaña debe encontrarse con frecuencia, entonces, ¿cómo podemos simplemente implementar tal función?
Inserte la descripción de la imagen aquí
Muchos zapatos para niños ciertamente dirán que es muy simple, cuando la imagen de la página en la que se hizo clic o en la ubicación se reemplaza con una imagen de efecto en la que se hizo clic, y luego se copia cada parte, esto se puede lograr, pero es muy problemático. A continuación presento una implementación simple de un método más simple

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

Supongo que te gusta

Origin blog.csdn.net/weixin_43169949/article/details/99895248
Recomendado
Clasificación