如何将API拼接数据及Vue计算属性中变量保留两位小数？

我已经拼接了API接口返回的数据并截取了前8项，请问如何将这些拼接后的数据保留两位小数？另外，以下是我的代码，我希望将变量element中的数值保留两位小数，该如何操作？

computed:{
    computedCrypto(){
    const element = this.limit ? this.crypto_data.slice(3,this.limit) : this.crypto_data
    for (let index = 0; index < element.length; index++) {
        console.log(element[index].price_usd.toFixed(2)) 
    }      
  }

  },

    
   
   

     
  }

你现在的代码仅打印了保留两位小数的结果，但没有修改element内的实际数据。要让element中的每个price_usd都保留两位小数，有两种实用方式：

1. 修改数据（适合后续需要复用处理后的数据） #

用map遍历数组，复制每个元素并修改price_usd字段，让computed返回处理后的数组：

computed:{
    computedCrypto(){
        // 按原有逻辑截取数据
        const element = this.limit ? this.crypto_data.slice(3, this.limit) : this.crypto_data;
        // 遍历处理每个元素的price_usd
        return element.map(item => {
            // toFixed(2)返回字符串，若需数字类型则用Number转换
            return {
                ...item,
                price_usd: Number(item.price_usd.toFixed(2))
                // 若只需字符串形式，直接写 item.price_usd.toFixed(2) 即可
            };
        });
    }
}

2. 模板展示时处理（仅用于页面显示，不修改原数据） #

如果只是页面展示需要保留两位小数，无需修改element，直接在Vue模板中处理：

<template>
  <div v-for="item in computedCrypto" :key="item.id">
    {{ item.price_usd.toFixed(2) }}
  </div>
</template>

注意事项 #

• toFixed(2)会自动对数字进行四舍五入，比如19.996会处理为20.00
• 如果API返回的price_usd是字符串类型，需先转成数字再处理：Number(item.price_usd).toFixed(2)
• toFixed返回的是字符串，若后续需要数值计算，记得用Number()转回数字类型

内容的提问来源于stack exchange，提问作者Mmonim Ukpanah