关于Vue.js的v-for的问题。
这是嵌套循环的问题，我想循环后的结构是：<ulclass="ul"><liclass="li">1</li><liclass="li">1</li><liclass="l...
这是嵌套循环的问题，我想循环后的结构是：
<ul class="ul">
<li class="li">1</li>
<li class="li">1</li>
<li class="li">1</li>
<li class="li">1</li>
<li class="li">1</li>
<li class="li">1</li>
</ul>
<ul class="ul">
<li class="li">2</li>
<li class="li">2</li>
<li class="li">2</li>
<li class="li">2</li>
<li class="li">2</li>
<li class="li">2</li>
</ul>
为了省时间，其他代码我就不写了,像这样的结构，怎么使用Vue实现。有一种写法，是不行的，例如
<ul class="ul" v-for="item in 10" :key="item.id">
<li class="li" v-for="(value,index) in 6" :key="value.id">{{ index+1 }}</li>
</ul>
上面的写法，每个ul，都有6个li。我想要的是有10个ul，只有第一个ul里面有6个li，请问怎么实现 展开
<ul class="ul">
<li class="li">1</li>
<li class="li">1</li>
<li class="li">1</li>
<li class="li">1</li>
<li class="li">1</li>
<li class="li">1</li>
</ul>
<ul class="ul">
<li class="li">2</li>
<li class="li">2</li>
<li class="li">2</li>
<li class="li">2</li>
<li class="li">2</li>
<li class="li">2</li>
</ul>
为了省时间，其他代码我就不写了,像这样的结构，怎么使用Vue实现。有一种写法，是不行的，例如
<ul class="ul" v-for="item in 10" :key="item.id">
<li class="li" v-for="(value,index) in 6" :key="value.id">{{ index+1 }}</li>
</ul>
上面的写法，每个ul，都有6个li。我想要的是有10个ul，只有第一个ul里面有6个li，请问怎么实现 展开
1个回答
展开全部
你先自己想想，实在想不出来了再看看我的代码吧。
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>HTML5学堂 http://h5course.com/</title>
</head>
<body>
<div class="wrap" id="app">
<ul v-for="ulItem in ulData">
<li v-for="liItem in ulItem">{{liItem}}</li>
</ul>
</div>
<script src="https://js.h5course.cn/vue.min.js" type="text/javascript"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
ulData: [6, 1, 4, 3, 2, 6]
}
});
</script>
</body>
</html>
效果图
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
