关于Vue的两层for循环
vue的核心功能是for循环,双层for循环的场景也是比较常见。
<script type="text/javascript"> var vm = new Vue({ el: "#ex", data: { data: [ { "Name": "马良1", "Items": [{ "Score": 810 }, { "Score": 80 }, { "Score": 80 }] }, { "Name": "马良2", "Items": [{ "Score": 80 }, { "Score": 80 }, { "Score": 80 }] }, { "Name": "马良3", "Items": [{ "Score": 80 }, { "Score": 80 }, { "Score": 80 }] }, { "Name": "马良4", "Items": [{ "Score": 80 }] } ] }, methods: { woca: function () { alert("卧槽") }, fuck: function () { this.data = [{ "Name": "马良1", "Items": [{ "Score": 810 }, { "Score": 80 }, { "Score": 80 }, { "Score": 810 }, { "Score": 80 }, { "Score": 80 }, { "Score": 810 }, { "Score": 80 }, { "Score": 80 }, { "Score": 810 }, { "Score": 80 }, { "Score": 80 }, { "Score": 810 }, { "Score": 80 }, { "Score": 80 }, { "Score": 810 }, { "Score": 80 }, { "Score": 80 }] }]; } } }); $('#Button1').click(function () { vm.fuck(); }); </script>
HTML代码
<div class="btn-group btn-group-md" role="group" style="margin:10px;"> <button type="button" id="Button1" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div> <div class="row" id="ex"> <div class="col-md-4" v-for="item in data"> <div class="panel panel-default"> <div class="panel-heading">{{item.Name}}</div> <div class="panel-body" style="max-height: 289px;overflow: auto;"> <div class="col-md-4" v-for="item1 in item.Items"> <div style="min-height:100px;border:1px solid #eee;margin-top:10px;line-height: 100px;text-align: center;font-size: 25px;border-radius: 15px;"> {{item1.Score}} </div> <div class="btn-group btn-group-xs" role="group" style="margin:10px;"> <button type="button" class="btn btn-primary">编辑</button><button type="button" class="btn btn-danger">删除</button> </div> </div> </div> </div> </div> </div>
v-for="item in data"
v-for="item1 in item.Items"
漫思
分类:
Vue2&Vue3
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器