使用 vue.js 添加动态 class 名称

Question

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

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

我在这里错过了什么？

Answer 1

如果使用 v-bind，则不能使用小胡子 {{}}。所以你可以这样做：

<div class="flash-container" :class="styleClass">
</div>

或

<div :class="`flash-container ${styleClass}`">
</div>

或

<div class="flash-container" :class={'styleClass': true}>
</div>

读这个https://vuejs.org/v2/guide/class-and-style.html#Binding-HTML-Classes

Answer 2

改成这样就可以了：

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

另一种选择是将声明拆分为动态声明和静态声明：

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

在引擎盖下，单独的部分在渲染时连接在一起。

这个 link 更多信息：https://vuejs.org/v2/guide/class-and-style.html

使用 vue.js 添加动态 class 名称

Adding dynamic class names using vue.js

vue.js

vuex

Flash.vue