vuejs根据数据有条件地绑定类
vuejs根据数据有条件地绑定类
提问于 2018-06-01 03:23:30
谁能告诉我我做错了什么？我正在尝试基于数据模型中是否显示yes或no来绑定类。我已经尝试过条件绑定，但我猜我可能遗漏了一个参数，或者做错了事情。
我遗漏了什么？我想让css类绑定到表。如果v-bind已经存在，我如何触发v-if？
谢谢
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
}
th {
width: 100px;
height: 100px;
background-color: yellow;
}
td {
background-color: grey;
}
.January{
background-color: pink;
}
</style>
</head>
<body>
<table>
<div id="cal">
<tr>
<th>Month</th>
<th>Savings</th>
<th>Spent</th>
</tr>
<tr>
<td v-bind:class="{'January':yes}">January</td>
<td>$100</td>
<td>$10</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
<td>$300</td>
</tr>
<tr>
<td>March</td>
<td>$80</td>
<td>$0</td>
</tr>
<script type="text/javascript" src="https://unpkg.com/vue@2.0.3/dist/vue.js"></script>
<script>
new Vue({
el: '#cal',
data: {
January:'yes',
February:'yes',
March:'yes',
April:'yes',
May:'yes',
June:'yes',
July:'yes',
August:'yes',
September:'yes',
October:'yes',
November:'yes',
December:'yes'
}
})
</script>
</div>
</table>
</body>
</html>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-01 03:28:10
因此，对于您传递的{css_class : someThingThatResolvesToTrueOrFalse}对象中的:class绑定
所以你可以像这样做
<td v-bind:class="{'January': January == 'yes'}">January</td>更好的方法是将yes替换为bool，并判断该值而不是比较。
这是您更新的代码。
new Vue({
el: '#cal',
data: {
January: 'yes',
February: 'yes',
March: 'yes',
April: 'yes',
May: 'yes',
June: 'yes',
July: 'yes',
August: 'yes',
September: 'yes',
October: 'yes',
November: 'yes',
December: 'yes'
}
})table,
th,
td {
border: 1px solid black;
}
th {
width: 100px;
height: 100px;
background-color: yellow;
}
td {
background-color: grey;
}
.January {
background-color: pink;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="cal">
<table>
<tr>
<th>Month</th>
<th>Savings</th>
<th>Spent</th>
</tr>
<tr>
<td v-bind:class="{'January':January == 'yes'}">January</td>
<td>$100</td>
<td>$10</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
<td>$300</td>
</tr>
<tr>
<td>March</td>
<td>$80</td>
<td>$0</td>
</tr>
</table>
</div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50631413
复制相关文章
相似问题