Как добавить класс, а затем удалить тот же класс в vuejs?

Question

У меня есть следующий div:

<div class="col bg-color-red-4">
            <a href="#"  v-on:click="showMobileMenu = !showMobileMenu">
                <i class="hamburger hamburger--3dx " v-bind:class="{ 'is-active': showMobileMenu }" >
                    <span class="hamburger-box">
                        <span class="hamburger-inner"></span>
                    </span>
                </i>
            </a>
            <p>3DX</p>
        </div>

 data(){
        return {
            showMobileMenu: false
        }
    },

Это визуально так:

в основном это кнопка, котораяпозволяет мне открыть левую панель:

Когда вы нажимаете на кнопку, вы добавляете класс 'is-active', который позволяет изменять форму, оставляя его так:

и он фактически открывает левую панель, но после выключения левой панели, то есть возврата к виду, в котором я находился, этоткаждый находит добавленный класс.

тогда мне нужно, чтобы при нажатии я изменял форму на «X», когда я открывал левую панель, но когда я возвращался, у меня не было формы «X».", то есть он больше не содержит класс is-active"

Заранее большое спасибо.

Answer 1

Сначала прочитайте официальные документы: [https://vuejs.org/v2/guide/class-and-style.html#ad][1]

В секунду - проверьте ответ Мэтта Эстрейха

На третьем - вы также можете привязать классы к переменным следующим образом:

<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
/>

И в Vue.js скрипт:

 data: {
  isActive: true,
  hasError: false
}

Answer 2

Вы можете привязаться к атрибуту class и указывать конкретные классы таким образом ..

---

[CodePen Mirror]

---

Фрагмент кода:

const vm = new Vue({
  el: "#app",
  data: {
    status: false,
    bars: "fa fa-bars",
    times: "fa fa-times",
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.5.14/vuetify.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.6/dist/vuetify.min.css" rel="stylesheet" />

<div id="app">
  <v-app>
    <v-content>
      <v-container>
        <i 
          style="cursor:pointer;"
          :class="status ? times : bars" 
          @click="status = !status"
          ></i>
        <h1>Click The Icon</h1>
        <h3>It is currently {{ status ? 'open' : 'closed' }}</h3>
      </v-container>
    </v-content>
  </v-app>
</div>

---