vuejs
/
vue
Mirror von https://github.com/vuejs/vue.git


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

            //Vue.config({debug: true})

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

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

            var getChar = (function () {
                var count = 0
                return function () {
                    return (count++).toString()
                }
            })()

            function getPos () {
                return items.length - 1
            }
        </script>
    </body>
</html>