Vue.js: 조건부 클래스 스타일 바인딩

Vue.js: 조건부 클래스 스타일 바인딩

다음과 같은 방법으로 액세스할 수 있는 데이터가 있습니다.

{{ content['term_goes_here'] }}

...그리고 이것은 다음 중 하나에 대해 평가됩니다.true또는false. 다음과 같은 표현의 진실성에 따라 클래스를 추가하고 싶습니다.

<i class="fa" v-bind:class="[{{content['cravings']}} ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline']"></i>

어디에true나에게 수업을 준다.fa-checkbox-marked그리고 거짓은 나에게fa-checkbox-blank-outline위에서 쓴 방법으로는 오류가 발생합니다.

- invalid expression: v-bind:class="[{{content['cravings']}} ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline']"

어떻게 써야 수업을 조건부로 결정할 수 있을까요?

오브젝트 구문을 사용합니다.

v-bind:class="{'fa-checkbox-marked': content['cravings'],  'fa-checkbox-blank-outline': !content['cravings']}"

오브젝트가 복잡해지면 메서드로 추출합니다.

v-bind:class="getClass()"

methods:{
    getClass(){
        return {
            'fa-checkbox-marked': this.content['cravings'],  
            'fa-checkbox-blank-outline': !this.content['cravings']}
    }
}

마지막으로, 이와 같은 모든 컨텐츠 속성에 대해 이 작업을 수행할 수 있습니다.

v-bind:class="getClass('cravings')"

methods:{
  getClass(property){
    return {
      'fa-checkbox-marked': this.content[property],
      'fa-checkbox-blank-outline': !this.content[property]
    }
  }
}

<i class="fa" v-bind:class="cravings"></i>

및 계산값을 추가합니다.

computed: {
    cravings: function() {
        return this.content['cravings'] ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline';
    }
}

개체를 v-bind:class로 전달하여 클래스를 동적으로 전환합니다.

<div v-bind:class="{ disabled: order.cancelled_at }"></div>

이것은 Vue 문서에서 권장하는 내용입니다.

문제는 블레이드입니다.이것을 사용해 보세요.

<i class="fa" v-bind:class="['{{content['cravings']}}' ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline']"></i>

Vue.js의 조건을 가진 동일한 요소에 대해 별도의 css 클래스를 적용하고 싶다면 아래의 method.it를 사용할 수 있습니다.

html

 <div class="Main" v-bind:class="{ Sub: page}"  >

여기서 Main과 Sub는 동일한 div 요소의 두 개의 다른 클래스 이름입니다. v-bind:class 디렉티브는 여기서 서브 클래스를 바인딩하는 데 사용됩니다. page는 값이 변경되었을 때 클래스를 업데이트하는 데 사용되는 속성입니다.

js

data:{
page : true;
}

여기에서는 필요에 따라 조건을 적용할 수 있습니다.따라서 페이지 속성이 true 요소가 되면 Main 및 Sub claases css 스타일이 됩니다. 그러나 false일 경우 메인 클래스 css 스타일만 적용됩니다.

backticks " 와 같은 문자열 템플릿을 사용할 수 있습니다.

:class="`${content['cravings'] ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline'}`"

언급URL : https://stackoverflow.com/questions/43210508/vue-js-conditional-class-style-binding