问答博客资讯标签用户活动
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

vue.js的v-for怎么对非顺序的键值进行渲染？

头像
EnterCxs
    34444063

    json格式如下
    {

    "0": {
    "name": "1"
},
"2": {
    "name": "2"
}

    }

    疑问1
    返回的这种格式的json怎么用v-for渲染?(不改变键值的情况,因为要使用到)

    疑问2
    v-for取到键值的值？

    vue.js
    阅读 4.5k
    4 个回答
    得票最新
    头像
    Reachel
      2.6k1114
      ✓ 已被采纳

      一样的直接用v-for即可，循环时可以用index取到键值。
      更新一下，三个参数不一定传完的，第一个参数对应值，第二个参数对应键，第三个参数对应下标，传2个参数的情况表示只获取键值。
      鉴于会造成语义上的误解，还是把index换为其他比较好

      <!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>test</title>  
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>  
</head>  
<body>  
    <div id='app'>
      <ul>
        <li v-for="(item,key) in list">
          {{item.name}}
          {{key}}
        </li>
      </ul>
    </div>
<script>
var vm = new Vue({
  el:'#app', 
  data(){
    return{
      list:{
        "0": {
            "name": "1"
        },
        "2": {
            "name": "2"
        }
      }
    }
  }
});
</script>
</body>  
</html>
      头像
      Saihy
        3517

        循环部分v-for="(v,k,i) in obj" 取值部分v.name

        头像
        wlove
          6.9k3835
          头像
          dolphinfine
            7516

            循环出的值是对象，打点调用属性值就行了。

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