Vue.js - 关于数组 - 《Vue》

常用的方法
不能触发视图更新的有哪些呢
- 场景:
- 通过计算属性来实现数组过滤
完整代码

常用的方法

在 Vue 里数组方法也会触发视图更新。

<body>
<div id="app">
    <ul>
        <li v-for="study in arr">
            {{study}}
        </li>
    </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            arr: [
                'book',
                'pen',
                'pencli'
            ]
        }
    })
</script>

push()

在数组末尾添加，返回值是新数组长度

pop()

删除数组最后一个元素，返回值是被删除的元素

shift()

删除数组第一个元素，返回值是被删除的元素

unshift()

在数组第一个元素位置添加，返回值是新数组长度

splice()

可以添加/删除数组，返回值是删除的元素
三个参数，第一个参数表示开始操作的位置(下标/索引)
第二个参数表示要操作的长度
第三个参数表示要添加的元素

arr=[
    'book',
    'pen',
    'pencli'
]
arr.splice(1,1)
//arr:['book', 'pencli']
arr.splice(0,0,'lili')
//arr:['lili', 'book', 'pencli',]

sort()和 reverse()

<body>
<div id="app">
    <ul>
        <li v-for="study in arr">
            {{study}}
        </li>
    </ul>
    <button @click="sortArry">从小到大排序</button>
    <button @click="reverseArry">反转数组排序</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            arr: [
                'book',
                'pen',
                'pencli'
            ]
        },
        methods: {
            sortArry() {
                this.arr.sort(function (a, b) {
                    return a.length - b.length
                })
            },
            reverseArry() {
                this.arr.reverse()
            }
        }
    })
</script>

不能触发视图更新的有哪些呢

例如 filter()、concat() 和 slice()。它们不会变更原始数组，而总是返回一个新数组

场景:

改变数组中的指定项,(变更数组)
改变数组的长度(app.splice(1))

Vue里面给我们内置了一个 set()方法应对这样的情况

Vue.set(target, index,value)
Vue.set(app.arr, 1, 'car')
//arr  =>  ['book', 'car', 'pencli']

通过计算属性来实现数组过滤

<-html->
计算属性来实现数组过滤<br>
数组中含有 'oo' 的项：{{matchoo}}
<-Vue实例 ->
<script>
computed:{
    matchoo(){
        return this.arr.filter(function (book) {
            return book.match(/oo/)
        })
    }
},
</script>

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组更新</title>
</head>
<body>
<div id="app">
    <div v-for="study in arr">{{study}}</div>
    <button @click="sortArr">点我排序</button>
    <button @click="reserveArr">点我进行数组的翻转</button>
    <hr>
    下面的按钮没效果，不信你试试看
    <button @click="changeOne">改变数组的指定项</button>
    <button @click="changeArrLength">改变数组的长度</button>
    <hr>
    返回字符串中含有oo的项：
    {{ matchOO }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            arr:['book','pen','pencil']
        },
        computed:{
            matchOO:function () {
                //参数代表要过滤的每一项
                return this.arr.filter(function (book) {
                    return book.match(/oo/);
                });
            }
        },
        methods:{
            //利用sort方法进行排序
            sortArr:function () {
                this.arr.sort(function (a,b) {
                    //从小到大排
                    return a.length- b.length;
                });
            },
            reserveArr:function () {
               this.arr.reverse();
            },
            //改变数组的指定项
            changeOne:function () {
                this.arr[0] = "car";
            },
            //改变数组的长度
            changeArrLength:function () {
                this.arr.length = 1;
            }
        }
    })
    //改变vue的第一项
    Vue.set(app.arr,1,"car");
</script>
</body>
</html>