Vue中的嵌套循环

作者: 早岁那知世事艰
发布时间: 2024-10-13 01:44:39 (28天前)
转自：

3 条回复

0#
回复此人
樱花弄๑•ั็•็ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 在这里你举例说明： </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-js lang-js prettyprint-override"> <code> var vm = new Vue({ el: '#app', data: { questions: [ { subjects: ['question 1.1', 'question 1.2'] }, { subjects: ['question 2.1', 'question 2.2'] } ] } }) </code> </pre> <pre class="snippet-code-html lang-html prettyprint-override"> <code> <script src="https://cdn.jsdelivr.net/vue/2.0.3/vue.js"></script> <div id="app"> <ul> <li v-for="question in questions"> <ul> <li v-for="subject in question.subjects"> {{ subject }} </li> </ul> </li> </ul> </div> </code> </pre> </DIV> </DIV> <P> </p> </DIV>

编辑
1#
回复此人
子阳 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 接受的答案解决了作为属性创建的对象内的数组。我正在寻找迭代简单的多维数组，它把我带到了这个页面。因此，为后代添加该答案： </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-js lang-js prettyprint-override"> <code> new Vue({ el: '#app', data: { questions: [ ['test1.1', 'test1.2'], ['test2.1', 'test2.2'] ] } }) </code> </pre> <pre class="snippet-code-html lang-html prettyprint-override"> <code> <script src="https://unpkg.com/vue"></script> <div id='app'> <ol> <li v-for="subjects, index in questions"> {{ index }} <ol type='I'> <li v-for="question in subjects"> {{ question }} </li> </ol> </li> </ol> </div> </code> </pre> </DIV> </DIV> <P> </p> <P> IOW，问题中的样本问题是裸体嵌套 <code> <li/> </code> 在父母内部添加 <code> <li/> </code> 没有子列表分组。 </p> </DIV>

编辑

登录后才能参与评论