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

条件付きでクラスを決定できるようにするには、どのように書けばよいのでしょうか。

プログラミング
conditional-formatting javascript vue.js vuejs2
4日 4月 2017 в 2:45
まだビューはありません
ソリューション

オブジェクト構文]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]
    }
  }
}
Bert
編集した答え 4日 4月 2017 в 3:15
解説 (5)

を計算して追加します。

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