Vue.js：條件類樣式綁定

Question

我有一些數據可以通過以下方式訪問：

{{ 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和 false 會給我fa-checkbox-blank-outline 。 我上面寫的方式給了我一個錯誤：

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

我應該如何編寫它才能有條件地確定班級？

Answer 1

使用對象語法。

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

Answer 2

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

並添加計算：

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

Answer 3

為什么不將對象傳遞給 v-bind:class 以動態切換類：

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

這是Vue 文檔所推薦的。

Answer 4

問題是刀片，試試這個

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

Answer 5

如果您想在Vue.js中為具有條件的相同元素應用單獨的 css 類，您可以使用下面給定的方法。它在我的場景中有效。

html

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

在這里， Main和Sub是同一個 div 元素的兩個不同的類名。 v-bind:class指令用於在此處綁定子類。 page是我們用來在值更改時更新類的屬性。

js

data:{
page : true;
}

如果需要，我們可以在這里應用條件。 因此，如果頁面屬性變為 true 元素將采用Main和Sub類 css 樣式。 但如果為 false，則僅應用Main類 css 樣式。

Answer 6

您可以使用字符串模板，如反引號 `` ：

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