vue中遍历数组中的一个对象中的值这种结构的数据怎么遍历出来？

来源：蜘蛛抓取(WebSpider) 时间：2023-12-09 07:18 标签： vue中遍历数组中的一个对象中的值

接着上篇文章：这篇实现 根据后端动态返回数据的渲染tree下拉组件（只提供这部分重要代码参考，完整请在github拉取）
vue实现 Element-UI 的 Tree Select 树形选择器组件（一）组件封装
github下载地址：https://github.com/xiechunhao/vue-treeSelect1. 先准备一个后端返回的模拟JSON文件，命名为 tree.json{
"msg": "成功",
"status": "1",
"data": [{
"id": 1,
"parentId": "0",
"level": 1,
"goodsTypeName": "水果类",
"children": [{
"id": 2,
"parentId": "1",
"level": 1,
"goodsTypeName": "苹果01",
"children": []
},
{
"id": 3,
"parentId": "1",
"level": null,
"goodsTypeName": "橘子01",
"children": [{
"id": 4,
"parentId": "3",
"level": 1,
"goodsTypeName": "大橘子",
"children": []
}]
}
]
},
{
"id": 5,
"parentId": "0",
"level": 1,
"goodsTypeName": "蔬菜类",
"children": []
}
]
}
2. 递归遍历JSON文件，getNodeTree()方法<script>
import treeJson from './api/tree.json';
export default {
data() {
return {
list: [],
};
},
created(){
this.getNodeTree(treeJson);
let obj = {}
this.list = this.list.reduce((item, next) => {
obj[next.id] ? '' : obj[next.id] = true && item.push(next)
return item
}, [])
},
methods: {
getNodeTree(tree){
for(var i in tree){
if(typeof tree[i] == 'object'){
this.getNodeTree(tree[i])
}else{
this.list.push(
{
"id":tree["id"],
"parentId":tree["parentId"],
"name":tree["goodsTypeName"]
}
)
}
}
},
}
};
</script>
一、v-for循环数组
  • {{item}}
    • 其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。v-for 还支持一个可选的第二个参数，即当前项的索引。
  • {{item}}
    • 你也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法：
  • {{item}}
    • 二、v-for循环对象用 v-for 来遍历一个对象的 property。一个参数是值
  • {{ value }}
    • 也可以提供第二个的参数为 property 名称 (也就是键名)：两个参数时，第一个参数是值，第二个参数是属性名
    {{ name }}: {{ value }}
    还可以用第三个参数作为索引：三个参数时，第一个参数是值，第二个参数是属性名，第三个参数是索引
    {{ index }}. {{ name }}: {{ value }}
    在使用for循环的时候，最好给每个元素添加一个key，至于key有什么作用，请看这篇文章【Vue系列之v-for中key的作用】三、v-if与v-for一起使用 注意我们不推荐在同一元素上使用 v-if 和 v-for。当它们处于同一节点，v-for 的优先级比 v-if 更高
    写在最后 如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~谢谢各位读者们啦(^_^)∠※！！！
    显示效果：代码： vue树型组件

    我要回帖

    更多关于 vue中遍历数组中的一个对象中的值 的文章

     

    随机推荐