VUE 数组更新

时间 2019-11-12

标签 vue 数组更新繁體版

原文原文链接

一、数据方法分类：javascript

（1）原数组改变css

push
pop
unshift
shift
reverse
sort
splice html

（2）原数组未变，生成新数组vue

slice
concat
filterjava

mapc++

对于使原数组变化的方法，能够直接更新视图。数组

对于原数组未变的方法，可使用新数组替换原来的数组，以使视图发生变化。app

示例代码：this

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>vue示例</title>
    </head>

    <body>
        <div id="app">
            <ul>
                <template v-for="book in books">
                    <li>书名：{{book.name}}</li>
                    <li>做者：{{book.author}}</li>
                </template>
            </ul>
        </div>
        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
        <script type="text/javascript">
            var app = new Vue({ el: '#app', data: { books: [{ name: 'vuejs', author: 'a' }, { name: 'js高级', author: 'b' }, { name: 'java', author: 'c' } ] } }); //直接可使得视图改变
            //app.books.push({name: 'c++',author: 'd'});
            //须要更新原数组
            app.books = app.books.concat([{name: 'c++',author: 'd'}]); </script>
    </body>

</html>

注意：如下不会触发视图的更新。spa

（1）经过索引直接设置项。

（2）修改数组长度，app.books.length=1。

若不想改变原数组，可使用计算属性来过滤数组，如：

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>vue示例</title>
    </head>

    <body>
        <div id="app">
            <ul>
                <template v-for="book in filterBooks">
                    <li>书名：{{book.name}}</li>
                    <li>做者：{{book.author}}</li>
                </template>
            </ul>
        </div>
        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
        <script type="text/javascript">
            var app = new Vue({
                el: '#app',
                data: {
                    books: [{
                            name: 'vuejs',
                            author: 'a'
                        },
                        {
                            name: 'js高级111',
                            author: 'b'
                        },
                        {
                            name: 'java33333',
                            author: 'c'
                        }
                    ]
                },
                computed:{
                    filterBooks:function(){
                        return this.books.sort(function(a,b){
                            return a.name.length>b.name.length?1:-1
                        })
                    }
                }
            });
            
        </script>
    </body>

</html>

上述代码是按照书的名字由短到长排序。这个不会修改原数组。