Vue.js:条件类样式绑定

新手上路,请多包涵

我有一些数据可以通过以下方式访问:

 {{ content['term_goes_here'] }}

…这被评估为 truefalse 。我想根据表达式的真实性添加一个类,如下所示:

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

我应该如何编写它才能有条件地确定班级?

原文由 Jeremy Thomas 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 680
2 个回答

使用 对象语法

 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 发布,翻译遵循 CC BY-SA 4.0 许可协议

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

并添加计算:

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

原文由 Happyriri 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题