vue使用v-if判断出现的问题？

Question

有个需求是把后台传来的数据保留3位小数，使用如下代码可以实现，

<span v-if="gdp">{{gdp.toFixed(3)}}%</span>

但有个新需求是后端传个0，同样也要保留3位，我改成如下

<span v-if="gdp != null">{{gdp.toFixed(3)}}%</span>

初始化页面会报个错误。
我测试了一下

<span v-if="gdp != null">{{console.log(gdp)}}{{gdp.toFixed(3)}}%</span>

不知道是什么原因？

Answer 1

这里隐藏了类型转换细节。
toFixed这个方法是Number对象类型的方法，如果用数字直接调用这个方法，会将数字转为Number对象再进行调用。

而如果是1.toFixed,这个.是个啥呢，解释器不知道它是小数点还是函数调用。
所以改成显式转换就可以了：

Number(gdp).toFixed(3)

Answer 2

这样的问题，不建议写在行内。利用计算属性或者过滤器，这样可以很好的格式化数据

Answer 3

第一次渲染时，gdp非Number类型，原型链上没有toFixed方法，所以会报错。
给gdp一个Number类型的默认值，如0。

Answer 4

gdp的初始化数据是啥，如果是null，肯定会报错。把gdp初始化为0吧。