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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› Vue.js

这是一个创建于 1012 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

原生 js 办法是判断是否数组，是数组就创建列表，是字符串就创建子项然后迭代但是没有找到 vue 怎么写

第 1 条附言 · 2022-02-08 21:31:43 +08:00

答案
<!DOCTYPE html>
<html>

<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>

<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>

<body>
<script src='/source/js/vue.js'></script>
<main id="app">

</main>
<script>
const vm = Vue.createApp({
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>`,
}).mount('#app');
</script>
</body>

</html>

列表

嵌套

创建

9 条回复 • 2022-02-08 21:30:34 +08:00

MacDows

2022-02-08 20:17:48 +08:00 via Android

感谢各位大佬！！！！

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'>

<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 via Android

@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 via Android

@rabbbit 谢谢老哥解决了困扰我好几天的问题！万分感谢！！！！老哥牛逼！！！