Vue.js - 클래스를 수동으로 추가하지 않는 한 클래스를 기본적으로 적용하시겠습니까?

Vue.js - 클래스를 수동으로 추가하지 않는 한 클래스를 기본적으로 적용하시겠습니까?

나는 Vue.js에서 막 출발했는데 이게 가능한지 좀 막막해.다음 구성 요소 지정:

<button class="button large primary-gradient">{{ text }}</button>

가능하다면 개발자가 나중에 HTML의 버튼 컴포넌트에 다른 클래스를 추가하는지 여부에 따라 "대규모 1학년" 클래스가 조건부였으면 한다.

예를 들어, 개발자가 글을 쓰는 경우

<custom-button text="hi"></custom-button>

그것이 실현될 것이다.

<button class="button large primary-gradient">hi</button>

그러나 개발자가 다음과 같은 내용을 작성하는 경우:

<custom-button class="medium secondary" text="hi"></custom-button>

그것이 실현될 것이다.

<button class="button medium secondary">hi</button>

기본적으로 나는 개발자가 자신의 값을 추가하지 않는 경우에만 사용되는 이 버튼 구성요소에 대한 기본 클래스 값을 만들려고 시도하고 있다.내가 보기엔 이것은 꽤 쉽게 할 수 있을 것 같지만, 부에 대한 나의 한정된 지식이 나를 약간 방해하고 있다.통찰력이 있어서 고마워!

이것을 제어하기 위해서는 소품을 사용하는 것이 가장 좋을 것이다.

Vue.component('custom-button', {
  props: {
    text: String,
    size: { type: String, default: 'large' },
    type: { type: String, default: 'primary-gradient' }
  },
  computed: {
    classes: function () {
      return ['button', this.size, this.type].join(' ')
    }
  },
  template: '<button v-bind:class="classes">{{ text }}</button>'
})

사용량:

<custom-button size="medium" type="secondary" text="Hi"/>

참조URL: https://stackoverflow.com/questions/41497189/vue-js-apply-a-class-by-default-unless-a-class-is-manually-added