84669 人が学習中
152542 人が学習中
20005 人が学習中
5487 人が学習中
7821 人が学習中
359900 人が学習中
3350 人が学習中
180660 人が学習中
48569 人が学習中
18603 人が学習中
40936 人が学習中
1549 人が学習中
1183 人が学習中
32909 人が学習中
认证0级讲师
在v-for遍历对象的时候,会有一个$key变量。用你的数据写了一下,HTML部分应该是这样的:
{{ $key }} {{ $key }} {{ $key }} {{ value }}
这样写可以实现,但是不推荐。最好是把对象处理成合适的数组以后再遍历。
点击查看运行
//递归对象 var recursiveObject = Vue.extend({ name: 'recursive-object', template:[ '', '', '', '{{ key }}', '', '', '{{key}} - {{val}}', '', ''].join(''), props:{data:{}}, methods:{ is_obj:function(val){ return Object.prototype.toString.call(val) === '[object Object]' } } }) //注册个递归组件 Vue.component('recursiveObject',recursiveObject) //go... new Vue({ el:'#app', data:function(){ return { data:{ text:'yes', a0:{ test1:'vace1', test2:'vace2' }, a1:{ asub1:{ asubsub1:'hello1', asubsub2:'hellow' }, asub2:{ asubsub1:'hello4', asubsub2:'hello5', asubsub3:{ asubsubsub1:'world', asubsubsub2:'world' } } } } } } })
', '{{ key }}', '', '
建议数据最多二层,太多层逻辑乱,容易出错可以在拿到data的时候,处理一下data,整理为最多两层的data,然后再给到vuejs
在v-for遍历对象的时候,会有一个$key变量。用你的数据写了一下,HTML部分应该是这样的:
这样写可以实现,但是不推荐。最好是把对象处理成合适的数组以后再遍历。
在线版本
点击查看运行
建议数据最多二层,太多层逻辑乱,容易出错
可以在拿到data的时候,处理一下data,整理为最多两层的data,然后再给到vuejs