vue.js - 使用vue.js添加动态类名

我已经使用Vue.js制作了可自定义的Flash消息。这很好，但下一步是允许将动态类添加到组件。

Flash.vue

<template>
  <transition name="fade">
    <div v-if="showMessage" :class="flash-container {{ styleClass }}">
      <p>{{ message }}</p>
      <p>{{ styleClass }}</p>
    </div>
  </transition>
</template>

<script>
  export default{
    methods: {
      clearMessage () {
        this.$store.commit("CLEAR_MESSAGE")
      }
    },
    computed: {
      message () {
        return this.$store.getters.renderMessage
      },
      showMessage () {
        return this.$store.getters.showMessage
      },
      styleClass () {
        return this.$store.getters.styleClass
      }
    },
  }
</script>

如果我尝试这样添加它，则会出现此错误:

- invalid expression: Unexpected token { in

flash-container {{ styleClass }}

Raw expression: v-bind:class="flash-container {{ styleClass }}"

我在这里想念什么？

最佳答案

将其更改为此，它将起作用:

:class="[styleClass, 'flash-container']"

另一种选择是在动态和静态声明之间拆分声明:

class="flash-container" :class="styleClass"

在引擎盖下，单独的渲染器在渲染时结合在一起。

此链接以获取更多信息:https://vuejs.org/v2/guide/class-and-style.html