¿Cómo alternar una clase en vue.js?

Tengo lo siguiente:

<th class="initial " v-on="click: myFilter">
    <span class="wkday">M</span>
</th>

new Vue({
  el: '#my-container',
  data: {},
  methods: {
    myFilter: function(){
      //some code to filter users
    }
  }
});

Cuando hago clic en th quiero aplicar active como una clase de la siguiente manera:

<th class="initial active" v-on="click: myFilter">
    <span class="wkday">M</span>
</th>      

Esto debe alternar decir, cada vez que se hace clic se necesita agregar/quitar la clase.

InformationsquelleAutor adam78 | 2015-11-16

9 Comentarios

  1. 54

    Usted podría tener el activo de la clase depende de un valor booleano valor de datos:

    <th 
        class="initial " 
        v-on="click: myFilter"
        v-class="active: isActive"
    >
       <span class="wkday">M</span>
    </th>
    
    
    
        new Vue({
          el: '#my-container',
    
          data: {
              isActive: false
          },
    
          methods: {
            myFilter: function(){
                this.isActive = !this.isActive;
              //some code to filter users
            }
          }
        })
    • He encontrado esta útil: vuejs.org/guide/class-and-style.html
    • por alguna razón v-class="active: isActive" se bloquea mi aplicación, pero v-bind:class="{ active: isActive }" funciona para mí. Espero que esto sea útil para alguien.
    • Mi ejemplo es el de la versión 0.12
    • la sintaxis parece cambiar todo el tiempo con vue. En 2.* usted también puede hacer :class="..."
    • Lo que estoy haciendo en el vue.js-2. Cuando hago clic en una fila, el active de la clase se aplica a todas las filas. Estoy haciendo algo mal?
    • usted puede hacer que cada fila de su propio componente que es responsable de su propia isActive propiedad
    • todos los ejemplos para el establecimiento de un Activo de clase son para un solo elemento, lo que si tuve múltiples I v-prestados, entonces, ¿cómo iba yo a impartir clase Activa en la más reciente clic de esta lista. <a href="#" @click="switchRoom(room)" class="rooms" :class="{currentRoom: room.isActive}" v-for="(room, index) in allRooms" :key="index">{{ room.name }} </a>
    • parece que no se puede utilizar el doble guión en mi nombre de la clase con este método? por ejemplo :class="{ click--butonClass: ifTrue }"
    • Si el nombre de la clase tiene un guión => v-bind:class="{ 'active-class': isActive }"

  2. 60

    Sin la necesidad de un método:

    //html element
    <div id="mobile-toggle"
     v-bind:class="{ active: showMobileMenu }"
     v-on:click="showMobileMenu = !showMobileMenu">
    </div>
    
    //in your vue.js app
    data: {
        showMobileMenu: false
    }
    • se ve bien! Cualquier idea acerca de cómo hacerlo en un v-para?
    • v-para=»(elemento de índice) en los puntos» :key=»item.id» v-bind:class=»{ activo: activo == artículo }» @clic=»active = elemento»>, a Continuación, agregue .active {styles} y ponerlo dentro de <ul>
  3. 21

    Esta respuesta relevante para Vue.js version 2

    <th 
      class="initial " 
      v-on:click="myFilter"
      v-bind:class="{ active: isActive }"
    >
      <span class="wkday">M</span>
    </th>

    El resto de la respuesta por Douglas es todavía aplicable (configuración de la nueva Vue instancia con isActive: false, etc).

    Relevantes docs: https://vuejs.org/v2/guide/class-and-style.html#Object-Syntax y https://vuejs.org/v2/guide/events.html#Method-Event-Handlers

    • cuando hago clic en una fila, el active de la clase se aplica a todas las filas. Estoy haciendo algo mal?
    • mismo problema aquí, esto sólo funciona si sólo hay una clickable elemento en el componente. ¿qué pasa si un componente tiene varios elementos seleccionables?
    • Si usted pide una nueva pregunta puedo mirar en él. Gracias
  4. 14

    Si usted no necesita tener acceso a la alternancia de fuera del elemento, este código funciona sin necesidad de una variable de datos:

    <a @click="e => e.target.classList.toggle('active')"></a>
  5. 6

    Este ejemplo es el uso de Listas: Al hacer clic en algunos de li que sea de color rojo

    html:

    <div id="app">
      <ul>
        <li @click="activate(li.id)" :class="{ active : active_el == li.id }" v-for="li in lista">{{li.texto}}</li>   
      </ul>
    </div>

    JS:

    var app = new Vue({
      el:"#app",
      data:{
        lista:[{"id":"1","texto":"line 1"},{"id":"2","texto":"line 2"},{"id":"3","texto":"line 3"},{"id":"4","texto":"line 4"},{"id":"5","texto":"line 5"}],
        active_el:0
      },
      methods:{
        activate:function(el){
            this.active_el = el;
        }
      }
    });

    css

    ul > li:hover {
      cursor:pointer;
    }
    .active {
      color:red;
      font-weight:bold;
    }

    Violín:

    https://jsfiddle.net/w37vLL68/158/

  6. 4

    Además NateW la respuesta, si usted tiene guiones en el nombre de clase css, usted debe envolver la clase dentro de (solo) cita:

    <th 
      class="initial " 
      v-on:click="myFilter"
      v-bind:class="{ 'is-active' : isActive}"
    >
    
     <span class="wkday">M</span>
     </th>

    Ver este tema para más sobre el tema.

  7. 2

    Si usted necesita más de 1 clase

    Usted puede hacer esto:

    <i id="icon" 
      v-bind:class="{ 'fa fa-star': showStar }"
      v-on:click="showStar = !showStar"
      >
    </i> 
    
    data: {
      showStar: true
    }

    Notar las comillas simples ‘ en torno a las clases!

    Gracias a todas las demás soluciones.

  8. 1

    Tengo una solución que le permite comprobar para diferentes valores de una proposición y por lo tanto diferente <th> elementos se activa/inactiva. El uso de vue 2 sintaxis.

    <th 
    class="initial " 
    @click.stop.prevent="myFilter('M')"
    :class="[(activeDay == 'M' ? 'active' : '')]">
    <span class="wkday">M</span>
    </th>
    ...
    <th 
    class="initial " 
    @click.stop.prevent="myFilter('T')"
    :class="[(activeDay == 'T' ? 'active' : '')]">
    <span class="wkday">T</span>
    </th>
    
    
    
    new Vue({
      el: '#my-container',
    
      data: {
          activeDay: 'M'
      },
    
      methods: {
        myFilter: function(day){
            this.activeDay = day;
          //some code to filter users
        }
      }
    })
  9. -1

    JS:

    new Vue({
      el: '#fsbar',
      data:{
        isActive: false
      },
      methods: {
        toggle: function(){
          this.isActive = !this.isActive;
        }
      }
    });

    CSS:

    /*
    DEMO STYLE
    */
    @import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
    body {
    font-family: 'Poppins', sans-serif;
    background: #fafafa;
    }
    p {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1em;
    font-weight: 300;
    line-height: 1.7em;
    color: #999;
    }
    a, a:hover, a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
    }
    .navbar {
    padding: 15px 10px;
    background: #fff;
    border: none;
    border-radius: 0;
    margin-bottom: 40px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    }
    .navbar-btn {
    box-shadow: none;
    outline: none !important;
    border: none;
    }
    .line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #ddd;
    margin: 40px 0;
    }
    i, span {
    display: inline-block;
    }
    /* ---------------------------------------------------
    SIDEBAR STYLE
    ----------------------------------------------------- */
    .wrapper {
    display: flex;
    align-items: stretch;
    }
    #sidebar {
    min-width: 250px;
    max-width: 250px;
    background: #7386D5;
    color: #fff;
    transition: all 0.3s;
    }
    #sidebar.active {
    min-width: 80px;
    max-width: 80px;
    text-align: center;
    }
    #sidebar.active .sidebar-header h3, #sidebar.active .CTAs {
    display: none;
    }
    #sidebar.active .sidebar-header strong {
    display: block;
    }
    #sidebar ul li a {
    text-align: left;
    }
    #sidebar.active ul li a {
    padding: 20px 10px;
    text-align: center;
    font-size: 0.85em;
    }
    #sidebar.active ul li a i {
    margin-right:  0;
    display: block;
    font-size: 1.8em;
    margin-bottom: 5px;
    }
    #sidebar.active ul ul a {
    padding: 10px !important;
    }
    #sidebar.active a[aria-expanded="false"]::before, #sidebar.active a[aria-expanded="true"]::before {
    top: auto;
    bottom: 5px;
    right: 50%;
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
    }
    #sidebar .sidebar-header {
    padding: 20px;
    background: #6d7fcc;
    }
    #sidebar .sidebar-header strong {
    display: none;
    font-size: 1.8em;
    }
    #sidebar ul.components {
    padding: 20px 0;
    border-bottom: 1px solid #47748b;
    }
    #sidebar ul li a {
    padding: 10px;
    font-size: 1.1em;
    display: block;
    }
    #sidebar ul li a:hover {
    color: #7386D5;
    background: #fff;
    }
    #sidebar ul li a i {
    margin-right: 10px;
    }
    #sidebar ul li.active > a, a[aria-expanded="true"] {
    color: #fff;
    background: #6d7fcc;
    }
    a[data-toggle="collapse"] {
    position: relative;
    }
    a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
    content: '\e259';
    display: block;
    position: absolute;
    right: 20px;
    font-family: 'Glyphicons Halflings';
    font-size: 0.6em;
    }
    a[aria-expanded="true"]::before {
    content: '\e260';
    }
    ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    background: #6d7fcc;
    }
    ul.CTAs {
    padding: 20px;
    }
    ul.CTAs a {
    text-align: center;
    font-size: 0.9em !important;
    display: block;
    border-radius: 5px;
    margin-bottom: 5px;
    }
    a.download {
    background: #fff;
    color: #7386D5;
    }
    a.article, a.article:hover {
    background: #6d7fcc !important;
    color: #fff !important;
    }
    /* ---------------------------------------------------
    CONTENT STYLE
    ----------------------------------------------------- */
    #content {
    padding: 20px;
    min-height: 100vh;
    transition: all 0.3s;
    }
    /* ---------------------------------------------------
    MEDIAQUERIES
    ----------------------------------------------------- */
    @media (max-width: 768px) {
    #sidebar {
    min-width: 80px;
    max-width: 80px;
    text-align: center;
    margin-left: -80px !important ;
    }
    a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
    top: auto;
    bottom: 5px;
    right: 50%;
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
    }
    #sidebar.active {
    margin-left: 0 !important;
    }
    #sidebar .sidebar-header h3, #sidebar .CTAs {
    display: none;
    }
    #sidebar .sidebar-header strong {
    display: block;
    }
    #sidebar ul li a {
    padding: 20px 10px;
    }
    #sidebar ul li a span {
    font-size: 0.85em;
    }
    #sidebar ul li a i {
    margin-right:  0;
    display: block;
    }
    #sidebar ul ul a {
    padding: 10px !important;
    }
    #sidebar ul li a i {
    font-size: 1.3em;
    }
    #sidebar {
    margin-left: 0;
    }
    #sidebarCollapse span {
    display: none;
    }
    }

    HTML:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Collapsible sidebar using Bootstrap 3</title>
    <!-- Bootstrap CSS CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- Our Custom CSS -->
    <link rel="stylesheet" href="style4.css">
    </head>
    <body>
    <div class="wrapper" id="fsbar">
    <!-- Sidebar Holder -->
    <nav id="sidebar" :class="{ active: isActive }">
    <div class="sidebar-header">
    <h3>Bootstrap Sidebar</h3>
    <strong>BS</strong>
    </div>
    <ul class="list-unstyled components">
    <li class="active">
    <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false">
    <i class="glyphicon glyphicon-home"></i>
    Home
    </a>
    <ul class="collapse list-unstyled" id="homeSubmenu">
    <li><a href="#">Home 1</a></li>
    <li><a href="#">Home 2</a></li>
    <li><a href="#">Home 3</a></li>
    </ul>
    </li>
    <li>
    <a href="#">
    <i class="glyphicon glyphicon-briefcase"></i>
    About
    </a>
    <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false">
    <i class="glyphicon glyphicon-duplicate"></i>
    Pages
    </a>
    <ul class="collapse list-unstyled" id="pageSubmenu">
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
    </ul>
    </li>
    <li>
    <a href="#">
    <i class="glyphicon glyphicon-link"></i>
    Portfolio
    </a>
    </li>
    <li>
    <a href="#">
    <i class="glyphicon glyphicon-paperclip"></i>
    FAQ
    isActive: false, </a>
    </li>
    <li>
    <a href="#">
    <i class="glyphicon glyphicon-send"></i>
    Contact
    </a>
    </li>
    </ul>
    <ul class="list-unstyled CTAs">
    <li><a href="https://bootstrapious.com/tutorial/files/sidebar.zip" class="download">Download source</a></li>
    <li><a href="https://bootstrapious.com/p/bootstrap-sidebar" class="article">Back to article</a></li>
    </ul>
    </nav>
    <!-- Page Content Holder -->
    <div id="content">
    <nav class="navbar navbar-default">
    <div class="container-fluid">
    <div class="navbar-header">
    <button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn" @click="toggle()">
    <i class="glyphicon glyphicon-align-left"></i>
    <span>Toggle Sidebar</span>
    </button>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav navbar-right">
    <li><a href="#">Page</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Page</a></li>
    </ul>
    </div>
    </div>
    </nav>
    <h2>Collapsible Sidebar Using Bootstrap 3</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <div class="line"></div>
    <h2>Lorem Ipsum Dolor</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <div class="line"></div>
    <h2>Lorem Ipsum Dolor</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <div class="line"></div>
    <h3>Lorem Ipsum Dolor</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    </div>
    <!-- jQuery CDN -->
    <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
    <!-- Bootstrap Js CDN -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    /<script type="text/javascript">
    //   $(document).ready(function () {
    //      $('#sidebarCollapse').on('click', function () {
    //         $('#sidebar').toggleClass('active');
    //    });
    //}); jquery equivalent to vue
    </script>
    </body>
    </html>

Dejar respuesta

Please enter your comment!
Please enter your name here