Vue常用特性-陣列變異方法與動態陣列響應式資料

阿新 • • 發佈：2020-11-30

陣列變異方法

在 Vue 中，直接修改物件屬性的值無法觸發響應式。當你直接修改了物件屬性的值，你會發現，只有資料改了，但是頁面內容並沒有改變
變異陣列方法即保持陣列方法原有功能不變的前提下對其進行功能拓展

`push()`	往陣列最後面新增一個元素，成功返回當前陣列的長度
`pop()`	刪除陣列的最後一個元素，成功返回刪除元素的值
`shift()`	刪除陣列的第一個元素，成功返回刪除元素的值
`unshift()`	往陣列最前面新增一個元素，成功返回當前陣列的長度
`splice()`	有三個引數，第一個是想要刪除的元素的下標（必選），第二個是想要刪除的個數（必選），第三個是刪除後想要在原位置替換的值
`sort()`	sort() 使陣列按照字元編碼預設從小到大排序,成功返回排序後的陣列
`reverse()`	reverse() 將陣列倒序，成功返回倒序後的陣列

替換陣列

不會改變原始陣列，但總是返回一個新陣列

filter	filter() 方法建立一個新的陣列，新陣列中的元素是通過檢查指定陣列中符合條件的所有元素。
concat	concat() 方法用於連線兩個或多個數組。該方法不會改變現有的陣列
slice	slice() 方法可從已有的陣列中返回選定的元素。該方法並不會修改陣列，而是返回一個子陣列

<body>
    <div id="app">
        <div>
            <input type="text" v-model='fname'>
            <button v-on:click='add'>提交</button>
            <button @click='del'>刪除</button>
            <button @click='change'>替換</button>
        </div>
        <ul>
            <li :key='index' v-for 
='(item,index) in list'>{{item}}</li>
        </ul>
    </div>
    <script src="vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                fname: '',
                list: ['lemon', 'banana', 'apple']
            },
            methods: {
                add:  
function () {
                    this.list.push(this.fname);
                },
                del: function () {
                    this.list.pop();
                },
                change: function () {
                    // 替換陣列
                    this.list = this.list.slice(0, 2);
                }
            }
        })
    </script>
</body>

動態陣列響應式資料

Vue.set(a,b,c) 讓觸發檢視重新更新一遍，資料動態起來
a是要更改的資料、 b是資料的第幾項、 c是更改後的資料

<body>
    <div id="app">
        <ul>
            <li :key='index' v-for='(item,index) in list'>{{item}}</li>
        </ul>
        <div>{{info.uname}}</div>
        <div>{{info.age}}</div>
        <div>{{info.gender}}</div>

    </div>
    <script src="vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                list: ['apple', 'lemon', 'banana'],
                info: {
                    uname: 'lisi',
                    age: 18
                }
            },
            methods: {

            },
        });
        // vm.$set(vm.list, 1, 'lemon');
        // vm.$set(vm.list, 2, 'apple');
        // vm.$info.gender = 'male';
        vm.$set(vm.info, 'gender', 'female');
    </script>
</body>