Vue.js: Koşullu sınıf şekillendirme

Üzerinden erişilebilen bazı verilerim var:

{{ content['term_goes_here'] }}

... ve bu true ya da false olarak değerlendirildi. İfadenin doğruluğuna bağlı olarak aşağıdaki gibi bir sınıf eklemek istiyorum:

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

burada true bana fa-checkbox-marked sınıfını verir ve false bana fa-checkbox-blank-outline sınıfını verir. Yukarıda yazdığım şekilde hata alıyorum:

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

**Sınıfı koşullu olarak belirleyebilmek için nasıl yazmalıyım?

Programlama
conditional-formatting javascript vue.js vuejs2
2017ösp45ös14 Nisan 2017 в 2:45
10 görünümler
Çözüm

Nesne söz dizimi]1'i kullanın.

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

Nesne daha karmaşık hale geldiğinde, onu bir yönteme dönüştürün.

v-bind:class="getClass()"

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

Son olarak, bunu aşağıdaki gibi herhangi bir içerik özelliği için çalıştırabilirsiniz.

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

methods:{
  getClass(property){
    return {
      'fa-checkbox-marked': this.content[property],
      'fa-checkbox-blank-outline': !this.content[property]
    }
  }
}
Bert
Edited answer 2017ösp15ös15 Nisan 2017 в 3:15
Yorumlar (5)

ve hesaplanmış olarak ekleyin:

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