Polymer2.0 dom-repeat多级嵌套

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/polymer/lib/elements/dom-repeat.html">
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<dom-module id="custom-element">
    <template>
        <custom-style>
            <style is="custom-style" include="iron-flex"></style>
        </custom-style>
        <div class="layout horizontal wrap">
            <dom-repeat items="[[A]]" as="a">
                <template>
                    <div class="layout horizontal">
                        [[a]]
                        <dom-repeat items="[[B]]" as="b">
                            <template>
                                <div style="border:1px solid red;">
                                    [[b]]

                                    <dom-repeat items="[[C]]" as="c">
                                        <template>
                                            <div>[[c]]</div>
                                        </template>
                                    </dom-repeat>
                                </div>

                            </template>
                        </dom-repeat>
                    </div>

                </template>
            </dom-repeat>
        </div>

    </template>
    <script>
        class CustomElement extends Polymer.Element {
            static get is() {
                return 'custom-element';
            }

            static get properties() {
                return {
                    A: Array,
                    B: Array,
                    C: Array
                }
            }

            connectedCallback() {
                super.connectedCallback();
                this.A = this.getData('a');
                this.B = this.getData('b');
                this.C = this.getData('c');
            }

            getData(str) {
                let arr = [];
                for (let i = 0; i < 10; i++) {
                    arr.push(str + i);
                }
                return arr;
            }

        }

        customElements.define(CustomElement.is, CustomElement);
    </script>
</dom-module>
<custom-element></custom-element>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值