TiendaFront/src/components/ShoppingNav.vue

<template>
  <div id="BotonesShopping" class="row ">
<div class="col-sm-3 col-md-3 col-lg-3 col-xl-3 col-12 mt-1 d-flex align-items-center navshop "> <router-link to="/datosPersonales" class="btn colores gris prueba text-white"> Datos Personales  </router-link></div>
<div class="col-sm-3 col-md-3 col-lg-3 col-xl-3 col-12 mt-1 d-flex align-items-center navshop "> <router-link to="/datosPersonales" class="btn colores gris  text-white"> Direcciones  </router-link></div>
<div class="col-sm-3 col-md-3 col-lg-3 col-xl-3 col-12 mt-1 d-flex align-items-center navshop "> <router-link to="/datosPersonales" class="btn colores gris  text-white"> Envio  </router-link></div>
<div class="col-sm-3 col-md-3 col-lg-3 col-xl-3 col-12 mt-1 d-flex align-items-center navshop "> <router-link to="/datosPersonales" class="btn colores gris  text-white"> Pago  </router-link></div>
  
  </div>
</template>

<script>
const $ = require('jquery')


export default {
  props:['currentStep'],
data(){
  return{
    
  }
},
methods:{

 color(etapa){

var result = $(".colores:first")

  result.removeClass("gris").toggleClass("azul")

 console.log(result)
 console.log(etapa)

 }

},

 created(){
    
this.color(this.currentStep)


  }
}
</script>
<style >

.verde{
    background-color: #29B026 !important;
}
.azul{
    background-color: #1B3D70 !important;
}
.gris{
    background-color: #C4C4C4 !important;
}

.navshop  a {
 width: 100%;

}

@media screen and (max-width:1023px ) and (min-width: 760px) {
  .navshop a {
    font-size: .6rem !important;
    }
}



</style>