打赏

VUE 数组更新

1、数据方法分类：

（1）原数组改变

push
pop
unshift
shift
reverse
sort
splice

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

slice
concat
filter

map

 

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

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

示例代码：

<!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>

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

（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>

 

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

 

posted @ 2017-12-15 16:41  孟繁贵  阅读(8071)  评论(0)  编辑  收藏  举报
TOP