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>

上述代碼是按照書的名字由短到長排序。這個不會修改原數組。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。