Vue.js 在VueJS中显示和筛选对象的正确方法

现在我有一个API返回的数据，它的结构如下

{u id:“690506”，“u地址：”987394”，“u投标：”709395”，“u sids:“384130”}

{{Intl.NumberFormat（“en-US”）.format（DataCounts.\u-id）}
位置记录


{{mdiArch}
{{Intl.NumberFormat（“en-US”）.format（DataCounts.\u地址）}
位置记录


{{mdiArch}
{{Intl.NumberFormat（“en-US”）.format（数据计数）}
位置记录

等等

---

在UI中是否有一种更为条块化的方式来构造它，以便在API发生更改时/如果API发生更改，我不必检查30行代码以确保其正常工作。

您可以使用vue过滤器

或者类似的东西

---

编辑：或者你的意思是如何简化

Object（k，v）->html（ul）

那样的话

{{mdiArch}
{{value | numberFormatEn}}
位置记录

我可以得到关于为什么投票被否决的反馈吗

<ul>
    {{Intl.NumberFormat("en-US").format(DataCounts._ids)}}
     Location Records
</ul>
<ul>
  <v-icon>{{ mdiArch }}</v-icon>
    {{Intl.NumberFormat("en-US").format(DataCounts._addresses)}}
     Location Records
</ul>
<ul>
  <v-icon>{{ mdiArch }}</v-icon>
    {{Intl.NumberFormat("en-US").format(DataCounts._bids)}}
     Location Records
</ul>

// create global filter
const mySpecialFormat = Intl.NumberFormat("en-US");
Vue.filter('numberFormatEn', function (value) {
  if (!value) return ''
  return mySpecialFormat.format(value.toString())
})

// then use it somewhere
{{ DataCounts._ids | numberFormatEn }}

<ul v-for="(value,key) in DataCounts" :key="some-key">
  <v-icon v-if="...">{{ mdiArch }}</v-icon>
  {{ value | numberFormatEn }}
  Location Records
</ul>