无法将数字与v-if比较

Question

我想使用v-if根据绑定值的条件进行一些样式设计

我尝试使用v-if，但无法获得结果。我还尝试过使用三元运算符来完成工作

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

但是我想向社区询问后，代码总是以错误的条件结束。如果我做错了什么就给我

预先感谢

Answer 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}
    }
  }
});