vue/test/functional/fixtures/repeated-items.html

<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="set" v-on="click:set">set</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" v-ref="items">
            {{$index}} {{title}}
        </li>
    </ul>
</div>

<script src="../../../dist/vue.js"></script>
<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() })
            },
            set: function () {
                this.items.$set(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>