如何使用 Math.round 舍入从 Vue.js 中的 JSON 对象返回的值

Question

我正在尝试使用 CompositionAPI 在 Vue 3 中构建一个组件，returns 值从 json 对象显示到屏幕上。到目前为止，我已将组件设置为从本地 data.json 文件获取值，然后 return 将值传递给模板。 data.json 文件包含具有多个值的单个对象。我希望使用 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)
        }

但是，这仍然没有舍入对象中的值，每个值都有自己的名称（val、val2、val3、val4）。我怎样才能使用 Math.round() 或 Math.toFix(2) 将 data.json 中的所有值 return 集中舍入？

这是代码的其余部分：

组件（带 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>

data.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
> }

你可以试试这个。函数返回轮值

如何使用 Math.round 舍入从 Vue.js 中的 JSON 对象返回的值

How to use Math.round to round values returned from JSON object in Vue.js

javascript

json

object

vue.js

math.round