关于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"

posted on   漫思  阅读(25812)  评论(0编辑  收藏  举报

编辑推荐:
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8
点击右上角即可分享
微信分享提示