// $index 数组对象里表示循环到第几个数据 
        // i等价$index
        <ul id="example-1">
            <li v-for="(i, item) of items">{{item.message}} - {{$index}} - {{i}}</li>
        </ul>
        
        // template输出一组内容
        <ul>
            <template v-for="(i, item) of items">
                <li>{{item.message}}</li>
                <li class="divider">7</li>
            </template>
        </ul>
        
        // 如果数据是一个Object $key代表键值
        // key等价于$key
        <ul id="repeat-object" class="demo">
            <li v-for="(key, value) in object">{{value}} : {{$key}}</li>
        </ul>

        <script>

                // 给元素绑定class
                let vm = new Vue({
                    el : 'body',
                    data : {
                        parentMessage : 'Parent',
                        items : [
                            {message : 'Foo'},
                            {message : 'Bar'}
                        ],
                        object : {
                            FirstName : 'John',
                            LastName : 'Doe',
                            Age : 30
                        }
                    }
                });

                /* 
                    *   变异方法 : push()、pop()、shift()、unshift()、splice()、sort()、reverse()
                    *   vue封装了这些方法的变异方法 修改后 video会随之变化
                    *   这些方法会修改原始数组
                */

                /* 
                    *   替换数组 : filter()、concat()、slice() 不会修改原始数组
                    *   返回一个新数组 需要用新数组替换原始数组
                */
                vm.items.push({message : 'Wang'});
                
        </script>