Question

我正在从易于使用的API中获取数据，百分比变化的值可以是正数或负数。我正在尝试将一个类添加到该项目，因此，如果值是负数，则可以显示一个类，反之亦然。

这是我迄今为止没有尝试过的尝试：

<li v-for="info in infos.slice(0, 5)">  -- Grabs first 5 items in API
    <div :class="{ positive: info.percent_change > 0 }" v-html="info.percent_change"></div>
</li>

该代码正确显示percent_change值，但无论其为负还是正，都不会对其应用任何类。

不显示类名的示例输出：

<li><div class="">0.8%</div></li>
<li><div class="">-6.57%</div></li>

Answer 1

您应使用%清除replace('%','')符号，如下所示：

<div :class="{ positive: getNumValue(info.percent_change) > 0 }" v-html="info.percent_change"></div> </li>

，该方法如下所示：

methods:{
    getNumValue(percent){
       return percent!=undefined?percent.replace('%',''):0;
    }
   ...
 }

Answer 2

最好先解析该值，因为它会将字符串与0（零）进行比较。

类似{ positive: parseFloat(info.percent_change) > 0 }

Answer 3

您可以解析字符串值并将其转换为可以与0比较的浮点值。

html

<div :class="{ positive: isPositive(info.percent_change) }" 
      v-html="info.percent_change"></div> </li>

ts

public isPositive(v:string){
   return parseFloat(v) > 0; //parseFloat will ignore the %
}

有条件地从API设置数组值的样式

3 个答案:

html

ts