关于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>
效果图
微测检测5.10
2023-05-10 广告
2023-05-10 广告
您好!建议咨 深圳市微测检测有限公司,已建立起十余个专业实验室,企业通过微测检测就可以获得一站式的测试与认 证解决方案;(EMC、RF、MFi、BQB、QI、USB、安全、锂电池、快充、汽车电子EMC、汽车手机互 联、语音通话质量),认证遇...
点击进入详情页
本回答由微测检测5.10提供
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询