如何在Vue.js中将类绑定到两个以上的选项？
如何在Vue.js中将类绑定到两个以上的选项？
提问于 2019-05-30 17:32:58
我有以下Vue.js绑定的超文本标记语言：
<span :class="[obj.status === 'Online' ? 'badge-success' : 'badge-danger', 'badge badge-pill']">{{obj.status}}</span>我想添加另一个变体：
如果为obj.status === 'Updating'，则类应为badge-warning。
有效实现这一目标的最佳方法是什么？我认为我可以在现有的三元组中添加另一个三元组，但它看起来会很混乱。
回答 4
Stack Overflow用户
回答已采纳
发布于 2019-05-30 18:16:06
<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>Stack Overflow用户
发布于 2019-05-30 17:45:13
如果状态不是在线，您可以添加另一个第三操作员，如下所示
<span :class="[obj.status === 'Online' ? 'badge-success' : (obj.status === 'updating'?'badge-warning':'badge-danger'), 'badge badge-pill']">{{obj.status}}</span>Stack Overflow用户
发布于 2019-05-30 18:09:15
一种方法是将类赋值转换为方法：
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56375492
复制相关文章
相似问题
腾讯云开发者
