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="[obj.status === 'Online' ? 'badge-success' : (obj.status === 'updating'?'badge-warning':'badge-danger'), '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="[{'badge-success':obj.status === 'Online', 'badge-warning':obj.status === 'Updating', 'badge-danger':obj.status === 'Failed'},'badge badge-pill']"
>
{{obj.status}}
</span>

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

4 个答案: