zoukankan      html  css  js  c++  java
  • 关于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"
  • 相关阅读:
    C语言文件
    java课程设计-彩票购买抽奖程序
    面向对象设计大作业——图书馆
    有理数类设计
    图总结
    编译器、编辑器、文件、IDE等常见概念辨析
    树、二叉树、查找算法总结
    互评:数据结构、算法及线性表总结
    c语言文件
    第二次博客园作业
  • 原文地址:https://www.cnblogs.com/sexintercourse/p/9817209.html
Copyright © 2011-2022 走看看