vue&解构语法 实现新型冠状病毒肺炎的疫情实时动态的展示(一)

实现如下图红框里的效果

数据结构如下

 theadOption: {
        name: "省市",
        confirmNum: "确诊",
        death: "死亡",
        cured: "治愈"
      }

HTML部分

<div class="thead-option">
      <div
        class="thead-item"
        v-for="[key, value] in Object.entries(theadOption)"
        :key="key"
      >{{ value }}</div>
</div>

知识点总结部分

JS API语法 Object.entries将对象转换成数组形式，它的作用就是将对象里的键值对转换成单个数组，其中对象的键名为数组的第1个元素，相应的键值则为数组的经2个元素。

此处的[key, value] 语法为关键点，它是典型的数组解构形式，因为Object.entries(theadOption)返回的数据结构如下
[ [‘key1’,‘value1’], [‘key2’,‘value2’] ]

v-for指令配合数组解构形式，让key的绑定和 value的输出简洁多了。