vue.js를 사용하여 동적 클래스 이름 추가

vue.js를 사용하여 동적 클래스 이름 추가

Vue.js를 사용하여 맞춤형 플래시 메시지를 만들었습니다.이것은 정상적으로 동작하고 있습니다만, 다음의 순서에서는, 다이나믹 클래스를 컴포넌트에 추가할 수 있습니다.

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 를 참조해 주세요.

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를 읽어보십시오.

언급URL : https://stackoverflow.com/questions/48843757/adding-dynamic-class-names-using-vue-js