web-dev-qa-db-ja.com

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を提供し、falseはfa-checkbox-blank-outlineを提供します。上記の方法でエラーが発生しました：

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

条件付きでクラスを判別できるようにするにはどうすればいいですか？

javascriptvue.jsvuejs2conditional-formatting
36
Jeremy Thomas

オブジェクト構文 を使用します。

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]
    }
  }
}
62
Bert
<i class="fa" v-bind:class="cravings"></i>

そして、計算されたものを追加します：

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

オブジェクトをv-bind：classに渡して、クラスを動的に切り替えてみませんか：

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

これは Vue docs で推奨されているものです。

10
kaleazy

問題はブレードです、これを試してください

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