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']"

我應該怎麼寫它能夠有條件地確定類？

來源

2017-04-04 Jeremy Thomas

使用object syntax。

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] 
    } 
    } 
}

來源

2017-04-04 14:47:53 Bert

我重構爲：'' –

@JeremyThomas我會用數組語法或obj ect語法，但不是兩者都可能。 – Bert

是啊，我有點驚訝地看到他們的文檔中混合語法。不是粉絲。 – dave

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

，並添加在計算：

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

來源

2017-04-04 14:48:23 SLYcee

因爲有大約20個不同的術語，所以我必須有太多的方法 –

問題是葉片，嘗試這種

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

來源

2018-01-04 23:53:43

Vue.js：有條件類造型

回答

相關問題