无法用 v-if 比较数字答案

【问题标题】：Unable to compare numbers with v-if无法用 v-if 比较数字
【发布时间】：2019-06-12 18:47:28
【问题描述】：

我想使用 v-if 根据绑定值的条件做一些样式

我尝试使用 v-if 但无法获得结果。我还在 vue 中尝试过三元运算符，它可以正常工作


<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 中，数据包含一个键值对，我检查了它是否有值

但是在我想询问社区的多次搜索之后，代码总是以错误状态结束。如果我做错了什么，请指出我

提前致谢

【问题讨论】：

您引用的键是data 的索引，因为您在for 循环中使用key 作为索引参数。你可能的意思是检查v-if="value.something == 'Projected Utilization'"。
问题是我操纵了这些值并添加了一个字符串，这使得比较总是错误的。感谢支持

标签： javascript vue.js

【解决方案1】：

检查TR元素没有关闭标签且this的使用不正确，所以有效标记为：

示例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}
    }
  }
});

【讨论】：