无法使用v-if比较数字
无法使用v-if比较数字
提问于 2019-06-13 02:47:28
我想使用v-if根据绑定值中的条件设置样式
我试着使用v-if，但我无法得到结果。我还尝试了三元运算符vue it dint work。
<table>
<tbody>
<tr v-for="cat in this.table_data">
<th v-for="(value, key) in data">
<div v-if="key == 'Projected Utilization'">
<div v-if="0.0 <= value ">
<td style="background-color: coral">{{value}}</td>
</div>
<div v-else>
<td style="background-color: green">{{value}}</>
</div>
</tbody>
</table>我将数据放在table_data中，数据包含一个键值对，并且我已检查它是否具有值
但是，在经过多次搜索之后，代码总是以错误的状态结束，我想问问社区。如果我做错了什么请指教我
提前感谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-06-13 04:09:20
检查是否没有TR元素的结束标记，以及此的使用是否不正确，因此有效标记为：
示例1：(检查https://codepen.io/matiasperrone/pen/JQdRzW)
<div id="app">
<table>
<tbody>
<tr v-for="cat in table_data" :key="cat">
<th v-for="(value, key) in data" :key="value">
<div :style="{ backgroundColor: key === 'Projected Utilization' ? 'transparent' : 0.0 <= value ? 'coral' : 'green' }">{{ value }}</div>
</th>
</tr>
</tbody>
</table>
</div>Javascript：
new Vue({
el: '#app',
data() {
return {
table_data: [{name: 'data1'}, {name: 'data2'},],
data: {key1: 1001, key2: -1003, "Projected Utilization": 100}
}
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56568595
复制相关文章
相似问题
腾讯云开发者
