Как связать класс с более чем двумя вариантами в Vue.js?

Question

У меня есть следующий связанный Vue.js HTML:

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

Я хочу добавить другой вариант:

если obj.status === 'Updating', тогда класс должен быть badge-warning.

Каков наилучший способ добиться этого эффективно?Я думаю, что могу добавить еще одну тройку в существующую, но она будет выглядеть грязной.

Answer 1

Один из способов добавить несколько условий может быть таким:

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

Answer 2

Одним из способов было бы перенести ваше назначение класса на метод:

new Vue({
  el: "#app",
  data: {
  	myValues: [
    	  {status: 'Online'},
          {status: 'Updating'}
    ]
  },
  methods: {
  assignedClasses(status) {
      var classToAssign; 
      if(status === 'Online'){
      	classToAssign = 'badge-success';
      }
      else if(status === 'Updating') {
      	classToAssign = 'badge-warning';
      }
      else {
      	classToAssign = 'badge-danger';
      }
      
      return classToAssign;
    }
  }
})

<link href="https://unpkg.com/bootstrap@4.1.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div v-for="(obj, index) in myValues" :key="index">
    <span class="badge badge-pill" :class="assignedClasses(obj.status)">{{obj.status}}</span>
  </div> 
</div>

Answer 3

<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>

Вы можете условно выполнить рендеринг на основе свойства status.

Другой способ - переключить ваш класс:

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>

Answer 4

Вы можете добавить другого третичного оператора в случае, если Статус не в сети, как показано ниже

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