Vue經常使用特性-數組變異方法與動態數組響應式數據

時間 2020-11-30

標籤 vue 數組 app this 編碼 spa code 對象 blog 排序欄目字符編碼简体版

原文原文鏈接

數組變異方法

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

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

替換數組

不會改變原始數組，但老是返回一個新數組app

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) 讓觸發視圖從新更新一遍，數據動態起來this
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>