Vue Haga clic en Cambiar el cambio de clase y lograr el estilo actual de Active

Vue acaba de comenzar no mucho tiempo, se reúnen una gran cantidad de consejos sencillos y prácticos en el proceso de producción.

No hay mucha tinta directamente sobre el código:

 

En primer lugar, el primer aumento en una variable en los datos utilizados para almacenar los elementos del clic actual

data() {
    return {
      activeClass: -1, // 0为默认选择第一个,-1为不选择
    };
  },

 En segundo lugar, el código dentro de la plantilla, que @Haga clic Para recordar el índice de pase,

<li :class="activeClass == index ? 'active':''" v-for="(item,index) in itemList" :key="index" @click="getItem(index)">
          {{itme.text}}
        </li>

En tercer lugar, el evento click: cambiar el valor de los datos dentro de activeClass

    getItme(index) {
      this.activeClass = index;  // 把当前点击元素的index,赋值给activeClass
    },

En cuarto lugar, en el estilo del estilo de escritura en .active

.active {
  /* background: #eee; */
  color: #1e82d2;
  font-weight: bolder;
}

 

Publicado 18 artículos originales · ganado elogios 10 · Vistas a 50000 +

Supongo que te gusta

Origin blog.csdn.net/a350110085/article/details/81605092
Recomendado
Clasificación