vue v-for遍历获取对象的中文键值

最新推荐文章于 2023-09-13 17:45:25 发布

weixin_51125242

最新推荐文章于 2023-09-13 17:45:25 发布

阅读量1.9k

点赞数

本文链接：https://blog.csdn.net/weixin_51125242/article/details/116233409

版权

这是一个关于Vue.js的示例，展示了如何在模板中使用`v-for`指令遍历数组和对象的数据。博客内容涉及到多层嵌套的数据遍历，通过`v-for`在`li`元素中展示`arr`数组中的每个对象，以及每个对象内的颜色和数量信息。这有助于理解Vue.js中的数据绑定和渲染机制。

摘要由CSDN通过智能技术生成

<template>
  <div id="app">
    <router-view />
    <ul>
      <li v-for="(item,index) in arr"
          :key="index">
        {{item}}
        <span v-for="(item,key,index) in arr[index]"
              :key="index">
          {{key}} :
          <span v-for="(item,key) in item[index]">
            {{key}} : {{item}}
          </span>
        </span>

      </li>
    </ul>

  </div>
</template>
<script>
export default {
  data () {
    return {
      arr: [
        { "apple": [{ "color": "red", "num": "265" }] },
        { "banana": [{ "color": "yellow", "num": "366" }] },
        { "pear": [{ "color": "green", "num": "896" }] }
      ]
    }
  }