vuejs
/
vue
mirror of https://github.com/vuejs/vue.git


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
							<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="utf-8">
        <script src="bind.js"></script>
        <script src="../../../dist/seed.js"></script>
        <style type="text/css">
            .test {
                width: 600px;
                height: 100px;
                background-color: #f00;
                padding: 10px;
                border: 1px solid #000;
                overflow: hidden;
                transition: all 1s ease;
                -moz-transition: all .2s ease;
                -webkit-transition: all .2s ease;
            }
            .sd-enter, .sd-leave {
                height: 0;
                padding-top: 0;
                padding-bottom: 0;
                border-top-width: 0;
                border-bottom-width: 0;
            }
            .sd-enter {
                background-color: #00f;
            }
            .sd-leave {
                background-color: #0f0;
            }
        </style>
    </head>
    <body>
        <div id="test">
            <div>
                <button class="button-0" sd-on="click:set">0</button>
                <button class="button-1" sd-on="click:set">1</button>
                <button class="button-2" sd-on="click:set">2</button>
                <button class="push" sd-on="click:push">push</button>
                <button class="pop" sd-on="click:pop">pop</button>
                <button class="splice" sd-on="click:splice">splice</button>
            </div>
            <div
                class="test"
                sd-repeat="item:items"
                sd-if="filter(item)"
                sd-transition
                sd-attr="data-id:item.a">
                {{item.a}}
            </div>
            <div
                class="test"
                sd-repeat="item:items"
                sd-show="filter(item)"
                sd-transition
                sd-attr="data-id:item.a">
                {{item.a}}
            </div>
        </div>
        <h1 style="margin:0">123</h1>
        <script>
            var test = new Seed({
                el: '#test',
                scope: {
                    b: 1,
                    set: function (e) {
                        this.b = +e.el.textContent
                    },
                    push: function () {
                        this.items.push({a: this.items.length + 1 })  
                    },
                    pop: function () {
                        this.items.pop()  
                    },
                    splice: function () {
                        this.items.splice(0, 1, {a:99})
                    },
                    filter: function (item) {
                        return item.a > this.b
                    },
                    items: [
                        {
                            a: 1
                        },
                        {
                            a: 2
                        }
                    ]
                }
            })
        </script>
    </body>
</html>