Vue中如何将API返回的嵌套图像数据传入自定义类判断方法

• 对属性渲染的效果存在判断误区
  你把图像宽高绑定到img标签的src属性时，能看到值正常显示，这并不能证明拿到的宽高是数字类型。Vue在渲染DOM属性绑定值时，会把所有类型的入参强制转成字符串输出，哪怕后端返回的宽高是字符串格式的"100"、"80"，绑定到src上也会毫无障碍地把文本值显示出来，和数字类型值的渲染效果没有任何区别，这就造成了“值正常拿到了”的假象。
• 类型不匹配导致比较逻辑失效
  你的classObject方法直接用width > height做大小判断，这在两个值都是数字类型时是正常生效的，但如果两个值是字符串类型，JS的比较规则是逐位对比字符的Unicode编码，不会自动转成数值再做比较。举个实际的例子：如果接口返回的宽高是字符串"100"、"80"，按照字符串比较规则，"100"的首位字符是"1"，编码值比"8"小，所以"100" > "80"的结果是false，最终会错误返回icon2，从表现上看就像是传值进方法后逻辑完全没生效。
• 为什么改造为计算属性也没用？不管是模板里调用方法，还是用计算属性封装逻辑，你消费的都是接口返回的原始宽高值，没有从根源修正类型问题，自然无法解决判断失效的问题。

• 调用方法做比较前，先把宽高强制转成数字类型：修改classObject方法的判断逻辑为if (Number(width) > Number(height)) return 'icon1'，可以直接解决类型不匹配导致的比较错误。
• 排查时可以直接在classObject方法第一行打印值和类型：console.log(width, typeof width, height, typeof height)，就能快速确认是不是字符串类型的问题。
• 如果想从源头减少重复处理，可以在接口数据返回后，统一遍历items数组，把每个图像对象里的width、height字段转成Number类型，后续所有用到宽高的逻辑都不需要额外做类型转换。

内容的提问来源于stack exchange，提问作者Miriam Arbaji