Vue.js 组合条件和非条件类在Vue中

在本文中，我们将介绍如何在Vue.js中组合条件和非条件类。

条件类

Vue.js通过使用v-bind:class指令来添加和移除CSS类。我们可以根据特定条件来为元素添加类，这样可以轻松改变元素样式。

使用v-if指令

我们可以使用v-if指令来根据特定条件添加类。假设我们有一个按钮，并且希望根据用户是否已登录来改变按钮样式。我们可以在按钮上使用v-if指令，并在条件满足时添加一个类。

<template>
  <button v-if="loggedIn" class="logged-in-button">Logged In</button>
  <button v-else class="logged-out-button">Logged Out</button>
</template>

<script>
export default {
  data() {
    return {
      loggedIn: true
    }
  }
}
</script>

<style>
.logged-in-button {
  background-color: green;
}

.logged-out-button {
  background-color: red;
}
</style>

在上面的示例中，如果loggedIn变量为true，则显示带有.logged-in-button类的按钮，否则显示带有.logged-out-button类的按钮。

使用v-bind:class指令

除了使用v-if指令，我们还可以使用v-bind:class指令根据一个或多个条件动态添加类。我们可以通过计算属性来判断条件，并将计算结果传递给v-bind:class指令。

<template>
  <div class="user-profile" :class="{'admin': isAdmin, 'active': isActive}">
    <h2>User Profile</h2>
    <p>{{username}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: 'John Doe',
      isAdmin: true,
      isActive: false
    }
  },
  computed: {
    classes() {
      return {
        admin: this.isAdmin,
        active: this.isActive
      }
    }
  }
}
</script>

<style>
.admin {
  background-color: red;
}

.active {
  color: blue;
}
</style>

在上面的示例中，当isAdmin为true时，.admin类将被添加到.user-profile元素上；当isActive为true时，.active类将被添加到.user-profile元素上。

非条件类

除了条件类之外，我们还可以在Vue.js中添加非条件类，这些类在不考虑任何条件的情况下始终存在。

使用:class指令

我们可以使用class属性和v-bind:class指令来添加非条件类。class属性可以包含一个或多个类名，并使用空格分隔。

<template>
  <div class="box" :class="extraClass">
    <p>Box Content</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      extraClass: 'highlight'
    }
  }
}
</script>

<style>
.highlight {
  background-color: yellow;
}
</style>

在上面的示例中，我们将.highlight类添加到.box元素中。

使用动态数据

我们也可以使用动态数据来添加非条件类。例如，如果我们有一个变量highlight，我们可以通过在class属性中使用插值语法来添加它。

<template>
  <div class="box" :class="[extraClass, highlight ? 'highlight' : '']">
    <p>Box Content</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      extraClass: 'border',
      highlight: true
    }
  }
}
</script>

<style>
.highlight {
  background-color: yellow;
}

.border {
  border: 1px solid black;
}
</style>

在上面的示例中，如果highlight为true，则.highlight类将被添加到.box元素中。