VUE——数组更新

前言：

Vue的核心是数据与视图的双向绑定，当我名修改数组时，vue会检测到数据变化，所以用v-for渲染的视图也会立即更新。

Vue包含了一组观察数组变异的方法，使用它们改变数组也会触发视图更新：

　　push()、pop()、shift()、unshift()、splice()、sort()、reverse()——》会改变原始数组

　　filter()、concat()、slice()——》不会改变原始数组

 示例：

    <div id="app">
        <ul>
            <template v-for="(item,idx) in books">
                <li>书名：{{item.name}}</li>
                <li>作者：{{item.autor}}</li>
            </template>
        </ul>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                books:[
                    {
                        name:'《Vue.js实战》',
                        autor:'粱澈'
                    },
                    {
                        name:'《 JavaScript 言精粹》',
                        autor:'Douglas Crockford'
                    },
                    {
                        name:'《 JavaScript 高级程序设计》',
                        autor:'Nicholas C.Zakas'
                    }
                ]
            }
        })
        app.books=app.books.filter(function(item){
            return item.name.match(/JavaScript/); //match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。
        })
    </script>

　　渲染的结果中，第一项会被过滤掉

过滤与排序

当你不想改变原数组，想通过一个数组的副本来做过滤或排序显示时，可以使用计算属性来返回过滤或排序后的数组

    <div id="app">
        <ul>
            <template v-for="(item,idx) in sortBooks">
                <li>书名：{{item.name}}</li>
                <li>作者：{{item.autor}}</li>
            </template>
        </ul>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                books:[
                    {
                        name:'《Vue.js实战》',
                        autor:'粱澈'
                    },
                    {
                        name:'《 JavaScript 言精粹》',
                        autor:'Douglas Crockford'
                    },
                    {
                        name:'《 JavaScript 高级程序设计》',
                        autor:'Nicholas C.Zakas'
                    }
                ]
            },
            computed:{
                filterBooks:function(){ //过滤掉书名不含JavaScript
                    return this.books.filter(item => item.name.match(/JavaScript/))
                },
                sortBooks:function(){//根据书名的长度排序
                    return this.books.sort((a,b)=> a.name.length<b.name.length)
                }
            }
        })
    </script>