问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

vuejs中访问json对象

头像
micstone
    1.6k1889106
    [{"1":48000000},{"2":58000000},{"3":58000000},{"5":48000000},{"6":48000000}]

使用v-for可以得到每一个对象，{"1":48000000}  {"2":58000000}  {"3":58000000} {"5":48000000} {"6":48000000}
我想显示每一个对象的key以及value,使用js处理可以实现，但是感觉有些麻烦，有什么简单的办法吗？
    vue.jsjsonjavascript
    阅读 4.8k
    4 个回答
    得票最新
    头像
    micstone
      1.6k1889106
      ✓ 已被采纳

      修改数据的封装格式，可以方便后面的数据呈现：

      [
    {
        transitCity:1
        transitCityPrice:{
            transitCity:1
            transitPrice:500
        }
    },    
    {
        transitCity:2
        transitCityPrice:{
            transitCity:2
            transitPrice:600
        }
    },    
    {
        transitCity:3
        transitCityPrice:{
            transitCity:3
            transitPrice:700
        }
    }
]
      头像
      qq523107430
        197118

        可以再遍历一次:

        <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <ul v-for="val of arr">
                <li v-for="(value,key,index) of val">
                    {{index}} -> {{key}} -->{{value}}
                </li>
            </ul>

        </div>
    </body>
    <script src="./vue2.2.3.js" charset="utf-8"></script>
    <script type="text/javascript">
        new Vue({
            el:'#app',
            data:{
                arr:[
                    {"1":48000000},
                    {"2":58000000},
                    {"3":58000000},
                    {"5":48000000},
                    {"6":48000000}
                ]
            }
        })
    </script>
</html>
        头像
        吃蛋白的外切酶
          1042

          对于这种比较复杂的结构还是写jsx

          头像
          kaka
            382
            <div v-for="item in arr">
    key:{{Object.getOwnPropertyNames(item)[0]}} 
    value:{{item[Object.getOwnPropertyNames(item)[0]]}}
</div>
            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题