如何在一个类 vue.js 2 中添加 2 个条件?

新手上路,请多包涵

我的 vue 组件是这样的:

 <template>
    <a :class="'btn ' + [respond == 'responseFound' ? ' btn-yellow' : ' btn-default', type == 1 ? ' btn-block' : ' btn-xs center-block']">
       ...
    </a>
</template>

我这样尝试,但它不起作用?

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

阅读 289
2 个回答

您可以使用 :class="[array, of, classes]" 语法:

 <a :class="['btn', (respond === 'responseFound' ? 'btn-yellow' : 'btn-default'), (type === 1 ? 'btn-block' : 'btn-xs center-block')]">

作为奖励,您不必担心添加前导空格,Vue 会处理它。

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

只是为了在视图/模板/标记中保持干净,将您的条件移动到计算属性:

 <template>
  <a :class="['btn', getRespondClass, getTypeClass]">
</template>

<script>
  export default {
    data () {
      return {
        respond: '',
        type: ''
      }
    },
    computed: {
      getRespondClass () {
        return this.respond === 'responseFound' ? 'btn-yellow' : 'btn-default'
      },
      getTypeClass () {
        return this.type === 1 ? 'btn-block' : 'btn-xs center-block'
      }
    }
  }
</script>

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

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