如何使用 Math.round 将 JSON object 返回的值舍入到 Vue.js

Question

我正在尝试使用 CompositionAPI 在 Vue 3 中构建一个组件，该组件将值从 json object 返回到屏幕。到目前为止，我已将组件设置为从本地 data.json 文件获取值，然后将值返回到模板. data.json 文件包含一个具有多个值的 object。 我希望使用 Math.round() 将每个值舍入到最接近的整数。 为此，我创建了一个计算属性，它对来自 data.json 的数据进行四舍五入，如下所示：

        const data = ref({})
        const roundedData = computed(() => roundedValue())

        const getData = async() => {
            try {
                const res = await axios.get('data.json')
                data.value = res.data
                console.log(data.value)
            } catch(error) {
                console.log(error)
            }
        }

        onMounted(() => {
            getData()
        })

        const roundedValue = () => {
            return Math.round(data.value)
        }

但是，这仍然没有对 object 中的值进行舍入，每个值都有自己的名称（val、val2、val3、val4）。 我 go 如何使用 Math.round() 或 Math.toFix(2) 来集中舍入从 data.json 返回的所有值？

这是代码的 rest：

组件（带有 Tailwindcss）：

<template>
  <div>
    <div class="px-4 py-6 sm:px-0">
        <div class="bg-white shadow overflow-hidden sm:rounded-lg">
            <div class="border-t border-gray-200">
                <dl>
                <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt class="text-sm font-medium text-gray-500">Value One</dt>
                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">{{ roundedData.val }}</dd>
                </div>
                <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt class="text-sm font-medium text-gray-500">Value Two</dt>
                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">{{ roundedData.val2 }}</dd>
                </div>
                <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt class="text-sm font-medium text-gray-500">Value Three</dt>
                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">{{ roundedData.val3 }}</dd>
                </div>
                <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt class="text-sm font-medium text-gray-500">Value Four</dt>
                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">{{ roundedData.val4 }}</dd>
                </div>
                </dl>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import { onMounted, ref, computed } from 'vue'
import axios from 'axios'
export default {

    setup() {
        const data = ref({})
        const roundedData = computed(() => roundedValue())

        const getData = async() => {
            try {
                const res = await axios.get('data.json')
                data.value = res.data
                console.log(data.value)
            } catch(error) {
                console.log(error)
            }
        }

        onMounted(() => {
            getData()
        })

        const roundedValue = () => {
            return Math.round(data.value)
        }

        return {
            data,
            roundedData
        }
    }
}
</script>

数据.json：

{
    "val": 1.446565,
    "val2": 45.678,
    "val3": 56.75,
    "val4": 78.98
}

Answer 1

> const roundedValue = () => {
>    const roundData = {}

>    Object.keys(data.value).map(key => {
>     return roundData[key] = Math.round(data.value[key]);                
>    })
> 
>   return roundData
> }

你可以试试这个。 function 返回的轮值