关于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,请问怎么实现
展开
 我来答
懂点君
高粉答主

2018-01-25 · 分享各种知识,从此让你多懂点,少吃亏!
懂点君
采纳数:197 获赞数:4794

向TA提问 私信TA
展开全部

你先自己想想,实在想不出来了再看看我的代码吧。

案例:

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

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式