Vue.js Vue在列表上迭代并检查条件
我有一个Vue文件,它将数据作为json。我想迭代我的模板中的问题,并选择要添加的TR。在Django模板中,我可以这样做:Vue.js Vue在列表上迭代并检查条件,vue.js,Vue.js,我有一个Vue文件,它将数据作为json。我想迭代我的模板中的问题,并选择要添加的TR。在Django模板中,我可以这样做: {% for foo in foos %} {% if foo.status == 'status1' %} <tr class="bg-warning"> {% elif foo.status == 'status2' %} <tr class="bg-success"&g
{% for foo in foos %}
{% if foo.status == 'status1' %}
<tr class="bg-warning">
{% elif foo.status == 'status2' %}
<tr class="bg-success">
{% elif foo.status == 'status3' %}
<tr class="bg-danger">
{% else %}
<tr class="bg-info">
{% endif %}
因此,我的问题是如何根据Object.status为每个迭代创建一个特定的表行?根据,我认为语法可能是将类包装在一个数组中,对象的形式为{name:boolean}
。尝试:
<tr v-for="foo in foos"
v-bind:class="[
{'bg-warning': isReview(foo.status)},
{'bg-info': isRegistering(foo.status)},
{'bg-danger': isCancelled(foo.status)},
{'bg-success': isFinished(foo.status)}
]">
也许吧
<template>
...
<tr v-for="foo in foos" :key="foo.status" :class="getStatusClass(foo)">
...
</template>
Vue.js迭代列表并检查条件-供您参考: index.html 样式表 输出以Chrome显示
您的代码是否不起作用?计算属性不能有参数,请尝试改为方法。是的,它根本不创建表行,因此页面为空Tanks,JFM,问题已解决,已改为计算方法
<tr v-for="foo in foos"
v-bind:class="[
{'bg-warning': isReview(foo.status)},
{'bg-info': isRegistering(foo.status)},
{'bg-danger': isCancelled(foo.status)},
{'bg-success': isFinished(foo.status)}
]">
<template>
...
<tr v-for="foo in foos" :key="foo.status" :class="getStatusClass(foo)">
...
</template>
methods: {
getStatusClass(foo) {
let className = '';
switch(foo.status) {
case 'warning': className = 'bg-warning'; break;
case 'info': className = 'bg-info'; break;
case 'danger': className = 'bg-danger'; break;
case 'success': className = 'bg-success'; break;
}
return [className];
}
}
<!DOCTYPE html>
<html>
<head>
<title>Vue iterating over list with and checking condition</title>
<link rel="stylesheet" href="css/style.css"></link>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
</head>
<body>
<div id="app">
<table>
<tr v-for="foo in foos" v-bind:class="{
'bg-warning': isReview(foo.status),
'bg-info': isRegistering(foo.status),
'bg-danger': isCancelled(foo.status),
'bg-success': isFinished(foo.status)}">
<td>{{ foo.issue }}</td>
</tr>
</table>
</div>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
new Vue({
el: '#app',
data: {
foos: [{
'status': 'status4',
'issue': 'An issue with status4 success'
},
{
'status': 'status1',
'issue': 'An issue with status2 warning'
}
]
},
methods: {
isReview: function (status) {
if (status === 'status1') {
return true
} else {
return false
}
},
isRegistering: function (status) {
if (status === 'status2') {
return true
} else {
return false
}
},
isCancelled: function (status) {
if (status === 'status3') {
return true
} else {
return false
}
},
isFinished: function (status) {
if (status === 'status4') {
return true
} else {
return false
}
}
}
});
.bg-success {
background-color: rgb(187, 223, 187);
}
.bg-warning {
background-color: yellow;
}