vue2.x学习之list的变异方法和测试

最新推荐文章于 2024-08-16 14:23:28 发布

YG青松

最新推荐文章于 2024-08-16 14:23:28 发布

阅读量715

点赞数 3

文章标签： vue 变异函数

本文链接：https://blog.csdn.net/qq_38553333/article/details/80240289

版权

一、官网上给出了7个变异方法：

Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

你打开控制台，然后用前面例子的 items 数组调用变异方法：example1.items.push({ message: 'Baz' }) 。

push：向list中添加item

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VueStudy_list变异方法</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <ul id="listTest">
            <li v-for="(value,index) in list" >
                {{index}}->{{value}}
            </li>
        </ul>
        <button @click="listPush">push</button>
    </div>
    <script>
        var vue=new Vue({
            el:"#app",
            data:{
                push:'0',
                list:[
                    {name:'qs'},
                    {age:'未知'}
                ],
            },
            methods:{
                listPush:function () {
                    this.list.push({name:'123'});
                }
            },
            watch:{

            }
        })
    </script>
</body>
</html>

pop:删除list的最后一条数据

这里的push和pop类似数据结构中的栈的操作，只能对栈顶操作，这里的是只是对list的末尾操作增删。

Shift：源码的解释：从数组中删除第一个元素并返回它。

---------》

unshift:源码解释：在数组的头部添加一个item

splice:源码解释：从数组中删除元素，如果必要的话，在它们的位置插入新元素，返回已删除的元素

参数：第一个是开始的索引，第二个是要删除item的数量，第三参数可写可不写替换删除item的items（可以是数组）

splice(0) 或者splice(0,2) 或者是splice(0,2,items)

reverse:源码解释：翻转数组

sort:个人总结：数组的排序函数，根据一个关键字，进行排序，关键字是数字就比较大小，关键字是字符就比较ASCII码

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VueStudy_list变异方法</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <ul id="listTest">
            <li v-for="(value,index) in list" >
                {{index}}->{{value}}
            </li>
        </ul>
        <button @click="listPush">push</button><br>
        <button @click="listPop">pop</button><br>
        <div v-text="Shift"></div>
        <button @click="listShift">Shift</button><br>
        <button @click="listUnShift">UnShift</button><br>
        <button @click="listSplice">Splice</button>
        <br>
        <div>
            <ul>
                <li v-for="(value,index) in sortList" >
                    {{index}}->{{value}}
                </li>
            </ul>
        </div>
        <button @click="listSort">sort</button>
        <button @click="listReverse">reverse</button>

    </div>
    <script>
        var vue=new Vue({
            el:"#app",
            data:{
                push:'0',
                Shift:'Shift',
                UnShitf:{UnShiftData:'ok'},
                sort:'sort',
                list:[
                    {name:'qs'},
                    {age:'未知'}
                ],
                sortList:[
                    {id:1,name:'qs'},
                    {id:3,sex:'不明'},
                    {id:2,age:'未知'}
                ]
            },
            methods:{
                listPush:function () {
                    this.list.push({name:'1234  '+this.list.length});
                },
                listPop:function () {
                    this.list.pop();
                },
                listShift:function () {
                    this.Shift=this.list.shift();
                },
                listUnShift:function () {
                    this.list.unshift(this.UnShitf);
                },
                listSplice:function () {
                    this.list.splice(0,2,{splice:'newitem'+this.list.length});
                },
                listSort:function () {
                    this.sortList.sort(function (a,b) {
                        return a.id<b.id;
                    })
                },
                listReverse:function () {
                    this.list.reverse();
                }

            },
            watch:{
            }
        })
    </script>
</body>
</html>