首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >无法使用v-if比较数字

无法使用v-if比较数字
EN

Stack Overflow用户
提问于 2019-06-13 02:47:28
回答 1查看 319关注 0票数 -1

我想使用v-if根据绑定值中的条件设置样式

我试着使用v-if,但我无法得到结果。我还尝试了三元运算符vue it dint work。

代码语言:javascript
复制
<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中,数据包含一个键值对,并且我已检查它是否具有值

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

提前感谢

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-06-13 04:09:20

检查是否没有TR元素的结束标记,以及的使用是否不正确,因此有效标记为:

示例1:(检查https://codepen.io/matiasperrone/pen/JQdRzW)

代码语言:javascript
复制
<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:

代码语言:javascript
复制
new Vue({
  el: '#app',
  data() {
    return {
      table_data: [{name: 'data1'}, {name: 'data2'},],
      data: {key1: 1001, key2: -1003, "Projected Utilization": 100}
    }
  }
});
票数 -1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56568595

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档