时间戳

首页 > 解决方案 > 如何将类绑定到 Vue.js 中的两个以上选项？

javascript - 如何将类绑定到 Vue.js 中的两个以上选项？

问题描述

我有以下 Vue.js 绑定的 HTML：

<span :class="[obj.status === 'Online' ? 'badge-success' : 'badge-danger', 'badge badge-pill']">{{obj.status}}</span>

我想添加另一个变体：

如果obj.status === 'Updating'那么类应该是badge-warning。

有效实现这一目标的最佳方法是什么？我想我可以在现有的三元组中添加另一个三元组，但它看起来会很乱。

标签： javascriptcssclassvue.jsbinding

解决方案

<span v-if="obj.status === 'Online'" class="badge-success">
   {{obj.status}}
</span>

<span v-if="obj.status === 'Updating'" class="badge-warning">
   {{obj.status}}
</span>

<span v-if="obj.status !== 'Updating' && obj.status !== 'Online'" class="badge-default">
    {{obj.status}}
</span>

您可以根据状态属性有条件地呈现。

另一种方法是切换您的班级：

new Vue({
  el: "#app",
  data: {
    obj: {
       status: 'Online'
    }
  },
  methods: {
  getBadgeClass(status) {
      switch(status) {
          case 'Online':
               return 'badge-success';
          case 'Updating':
               return 'badge-warning';
          default:
               return 'badge-default'
      }
    }
  }
})

然后在你的模板中你可以这样做：

<span :class="getBadgeClass(obj.status)">{{obj.status}}</span>

推荐阅读