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


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
							<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SEED repeated items</title>
        <meta charset="utf-8">
    </head>
    <body>
        <div id="app">
            <p>
                <button sd-on="click:push">push</button>
                <button sd-on="click:pop">pop</button>
                <button sd-on="click:shift">shift</button>
                <button sd-on="click:unshift">unshift</button>
                <button sd-on="click:splice">splice</button>
                <button sd-on="click:remove">remove</button>
                <button sd-on="click:replace">replace</button>
                <button sd-on="click:sort">sort</button>
                <button sd-on="click:reverse">reverse</button>
            </p>
            <p>Total items: {{items.length}}</p>
            <ul>
                <li sd-repeat="item:items">
                    {{item.$index}} {{item.title}}
                </li>
            </ul>
        </div>
        <script src="../dist/seed.js"></script>
        <script>

            Seed.config({debug: true})

            var items = [
                { title: 'A'},
                { title: 'B'},
                { title: 'C'}
            ]

            var demo = new Seed({
                el: '#app',
                scope: {
                    items: items,
                    push: function () {
                        this.items.push({ title: randomChar() })
                    },
                    pop: function () {
                        this.items.pop()
                    },
                    shift: function () {
                        this.items.shift()
                    },
                    unshift: function () {
                        this.items.unshift({ title: randomChar() })
                    },
                    splice: function () {
                        this.items.splice(0, 1, { title: randomChar() }, { title: randomChar() })
                    },
                    replace: function () {
                        this.items.replace(randomPos(), { title: randomChar() })
                    },
                    remove: function () {
                        this.items.remove(randomPos())
                    },
                    sort: function () {
                        this.items.sort(function (a, b) {
                            return a.title.charCodeAt(0) - b.title.charCodeAt(0)
                        })
                    },
                    reverse: function () {
                        this.items.reverse()
                    }
                }
            })

            function randomChar () {
                return String.fromCharCode(Math.floor(Math.random() * 30 + 50))
            }

            function randomPos () {
                return Math.floor(Math.random() * items.length)
            }
        </script>
    </body>
</html>