请教如何把嵌套的数组渲染成嵌套的列表

2022-02-08 20:16:15 +08:00
 MacDows

''' [ "A", [ "A", "B", "C", [ "A", "B", "C" ] ], "B", "C" ] ''' 把上面的变成下面这样的，
'''

1814 次点击
所在节点    Vue.js
9 条回复
MacDows
2022-02-08 20:17:48 +08:00
感谢各位大佬！！！！
rabbbit
2022-02-08 20:44:01 +08:00
<template>
　<ul v-if="Array.isArray(value)">
　　<deep v-for="(item, i) of value" :key="i" :value="item"> </deep>
　</ul>
　<li v-else>
　　{{ value }}
　</li>
</template>

<script>
export default {
　 name: "Deep",
　 props: {
　　 value: [Array, String],
　},
};
</script>
rabbbit
2022-02-08 20:45:17 +08:00
<template>
　<deep :value="value"></deep>
</template>

<script>
import Deep from "@/components/deep/deep";
export default {
　 components: { Deep },
　 data() {
　　 return {
　　　 value: ["A", ["A", "B", "C", ["A", "B", "C"]], "B", "C"],
　　};
　},
};
</script>
MacDows
2022-02-08 21:11:51 +08:00
@rabbbit 老哥你好，非常感谢老哥
我有一个不情之请，就是虽然我很不想当伸手党，但我现在的水平实在跑不动上面的代码,方便给一个浏览器能跑的例子吗？
谢谢老哥，下面是我自己写的，没有跑通
MacDows
2022-02-08 21:12:25 +08:00
@rabbbit <!DOCTYPE html>
<html>

<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<!-- <title>Page Title</title> -->
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>

<body>
<script src='/source/js/vue.js'></script>
<template>
<ul v-if="Array.isArray(value)">
<deep v-for="(item, i) of value" :key="i" :value="item"> </deep>
</ul>
<li v-else>
{{ value }}
</li>
</template>

<script>
export default {
name: "Deep",
props: {
value: [Array, String],

},
};
</script>

</body>

</html>
MacDows
2022-02-08 21:12:50 +08:00
@rabbbit 麻烦老哥了，非常感谢！
rabbbit
2022-02-08 21:24:03 +08:00
new Vue({
　 el: "#app",
　 components: {
　 Deep: {
　 name: "Deep",
　 props: {
　　 value: [Array, String],
　},
　 template: `
　　 <ul v-if="Array.isArray(value)">
　　　<deep v-for="(item, i) of value" :key="i" :value="item"> </deep>
　　 </ul>
　　 <li v-else>{{ value }}</li>
　　`,
　},
},
data() {
　 return {
　 value: ["A", ["A", "B", "C", ["A", "B", "C"]], "B", "C"],
　};
　},
　 template: `<deep :value="value"></deep>`,
});
rabbbit
2022-02-08 21:25:36 +08:00
new Vue({
　 el: "#app",
　 components: {
　　 Deep: {
　　　 name: "Deep",
　　　 props: {
　　　　 value: [Array, String],
　　　},
　　　 template: `
　　　　　<ul v-if="Array.isArray(value)">
　　　　　　<deep v-for="(item, i) of value" :key="i" :value="item"> </deep>
　　　　　</ul>
　　　　　<li v-else>{{ value }}</li>
　　　　`,
　　},
　},
　 data() {
　　 return {
　　　 value: ["A", ["A", "B", "C", ["A", "B", "C"]], "B", "C"],
　　};
　},
　 template: `<deep :value="value"></deep>`,
});
MacDows
2022-02-08 21:30:34 +08:00
@rabbbit 谢谢老哥解决了困扰我好几天的问题！万分感谢！！！！老哥牛逼！！！

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/832529

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX