1개의 클래스 vue.js 2에 2개의 조건을 추가하려면 어떻게 해야 하나요?

1개의 클래스 vue.js 2에 2개의 조건을 추가하려면 어떻게 해야 하나요?

vue 컴포넌트는 다음과 같습니다.

<template>
    <a :class="'btn ' + [respond == 'responseFound' ? ' btn-yellow' : ' btn-default', type == 1 ? ' btn-block' : ' btn-xs center-block']">
       ...
    </a>
</template>

그렇게 하려고 해도 안 돼요?

하시면 됩니다.:class="[array, of, classes]"★★★★

<a :class="['btn', (respond === 'responseFound' ? 'btn-yellow' : 'btn-default'), (type === 1 ? 'btn-block' : 'btn-xs center-block')]">

보너스로 선두 공간을 추가할 필요가 없으므로 Vue가 처리해 드립니다.

보기/템플릿/마크업에서 깨끗한 상태를 유지하려면 조건을 계산된 속성으로 이동하십시오.

<template>
  <a :class="['btn', getRespondClass, getTypeClass]">
</template>

<script>
  export default {
    data () {
      return {
        respond: '',
        type: ''
      }
    },
    computed: {
      getRespondClass () {
        return this.respond === 'responseFound' ? 'btn-yellow' : 'btn-default'
      },
      getTypeClass () {
        return this.type === 1 ? 'btn-block' : 'btn-xs center-block'
      }
    }
  }
</script>

현재 표시된 답변에는 한 가지 조건으로 여러 클래스를 추가할 수 있는 방법이 나와 있습니다.그러나 클래스에 여러 조건을 추가하고 싶다면 다음과 같이 하면 됩니다.

:class="{classname: condition_one && condition two}"

언급URL : https://stackoverflow.com/questions/43760011/how-can-i-add-2-condition-in-one-class-vue-js-2