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”，即它不包含该类不再处于活动状态

非常感谢。

Answer 1

首先阅读官方文档： [https://vuejs.org/v2/guide/class-and-style.html#ad][1]

第二次-查看Matt Oestreich的答案

第三-您还可以将类绑定到变量，如下所示：

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

如何添加一个类，然后在vuejs中删除相同的类？

2 个答案: