首页 > 其他分享 >Vue push() pop() shift().....

Vue push() pop() shift().....

时间:2022-11-16 10:14:14浏览次数:83  
标签:arr Vue cont title shift 数组 push id

push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。

eg:数组 中添加新元素

new Vue({
            data:{
               arr:  ['苹果','香蕉','橙子']
             },
         methods:{
                addData(){
                    this.arr.push("石榴");
                }
            }
    })

运行结果为:
苹果,香蕉,橙子,石榴

pop() 方法用于删除并返回数组的最后一个元素。

eg:移除最后一个数组元素

new Vue({
          data:{
               arr:  ['苹果','香蕉','橙子']
         },
          methods:{
                moveData(){
                    this.arr.pop();
                }
            }
    })

运行结果为:
苹果,香蕉

shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。

eg:从数组中移除元素

new Vue({
          data:{
                   arr:  ['苹果','香蕉','橙子']
             },
          methods:{
                moveData(){
                    this.arr.shift();
                }
            }
    })

运行结果为:
香蕉,橙子

unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。

eg:将新项添加到数组起始位置

new Vue({
          data:{
                   arr:  ['苹果','香蕉','橙子']
             },
          methods:{
                addData(){
                    this.arr.unshift("石榴","枇杷");
                }
            }
    })  

运行结果:
石榴,枇杷,苹果,香蕉,橙子

splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。

splice( index, len, [item]) 用来删除/替换/添加数组内某一个或者几个值(该方法会改变原始数组)。

参数:index:数组开始下标

len:替换/删除的长度

item:替换的值,删除操作的话item为空

删除:

//删除起始下标为1,长度为1的一个值(len设置1,如果为0,则数组不变)

eg:删除

new Vue({
              data:{
                       arr:  ['a','b','c','d']
                 },
              methods:{
                    moveData(){
                        this.arr.splice(1,1);
                    }
                }
        })  

运行结果:
【‘a’,‘c’,‘d’】

替换:

new Vue({
              data:{
                       arr:  ['a','b','c','d']
                 },
              methods:{
                    replaceData(){
                        this.arr.splice(1,1,'ttt');
                    }
                }
        })  

运行结果:
[‘a’,‘ttt’,‘c’,‘d’]

添加:

new Vue({
              data:{
                       arr:  ['a','b','c','d']
                 },
              methods:{
                    addData(){
                        this.arr.splice(1,0,'ttt');
                    }
                }
        }) 

运行结果:
[‘a’,‘ttt’,‘b’,‘c’,‘d’]

sort() 方法用于对数组的元素进行排序。
eg:排序

new Vue({
                  data:{
                           arr: [
                            {"id":0,"title":"11111","cont":"99999"},
                            {"id":1,"title":"22222","cont":"22222"},
                            {"id":2,"title":"33333","cont":"33333"},
                            {"id":3,"title":"44444","cont":"44444"},
                            {"id":4,"title":"55555","cont":"55555"},
                            {"id":5,"title":"66666","cont":"66666"},
                            {"id":6,"title":"77777","cont":"77777"},
                            {"id":7,"title":"77777","cont":"88888"}
                 
                        ]
                 },
              methods:{
                        sortData(){
                            this.list.sort((a,b)=>a.cont-b.cont);        
                    }
                }
        })  

运行结果:

 

 reverse() 方法用于颠倒数组中元素的顺序。
eg:

new Vue({
                  data:{
                           arr: [
                            {"id":0,"title":"11111","cont":"99999"},
                            {"id":1,"title":"22222","cont":"22222"},
                            {"id":2,"title":"33333","cont":"33333"},
                            {"id":3,"title":"44444","cont":"44444"},
                            {"id":4,"title":"55555","cont":"55555"},
                            {"id":5,"title":"66666","cont":"66666"},
                            {"id":6,"title":"77777","cont":"77777"},
                            {"id":7,"title":"77777","cont":"88888"}
                 
                        ]
                 },
              methods:{
                        reverserData(){
                            this.list.reverse();
                        }
                }
        })  

运行结果:
翻转前:

翻转后: 

 

替换数组
filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。

concat() 方法用于连接两个或多个数组。

slice() 方法可从已有的数组中返回选定的元素。

其他
split() 方法用于把一个字符串分割成字符串数组。

 

 转载:https://blog.csdn.net/qq_39399966/article/details/99059056

标签:arr,Vue,cont,title,shift,数组,push,id
From: https://www.cnblogs.com/chenze-Index/p/16894933.html

相关文章

  • vue跨域2.x,3.x跨域,nginx跨域,nginx+域名+ssl证书配置
    vue跨域2.x文件位置config---》index.js---》大约13行---》跨域内容proxyTable:{'/api':{target:'http://192.168.0.125:8000/info',//跨域地址changeOrigin:t......
  • Vue2 到 Vue3,重温这 5 个常用的 API
    距离Vue3发布已经过去一年多时间了,从Vue2到Vue3是一个不小的升级,包括周边生态等。虽然目前大多数开发者们在使用的仍旧以Vue2为准,但Vue3显然是Vue开发者们未来必须面对的,......
  • vuex中的getters
    当state中的数据需要经过加工后在使用//该文件用于创建vuex中的store//引入vueximportVuefrom'vue'importVuexfrom'vuex'//使用插件Vue.use(Vuex);//猪备ac......
  • new Vue的时候到底做了什么
    Vue加载流程1.初始化的第一阶段是Vue实例也就是vm对象创建前后:首先Vue进行生命周期,事件初始化发生在beforeCreate生命周期函数前,然后进行数据监测和数据代理的初始化,也就......
  • 最近面试被问到的vue题
    v-for为什么要加key如果不使用key,Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。key是为Vue中vnode的唯一标记,通过这个......
  • Vue的computed和watch的区别是什么?
    一、computed介绍computed用来监控自己定义的变量,该变量在data内没有声明,直接在computed里面定义,页面上可直接使用。//基础使用{{msg}}<inputv-model="name"/>......
  • 熬夜整理的vue面试题
    Vue-router路由模式有几种vue-router有3种路由模式:hash、history、abstract,对应的源码如下所示switch(mode){case'history':this.history=newHTML5H......
  • 在Vue项目中引入公共css样式
    通常,较为复用次数高的css样式,需要提取出来同一存放在assets资源文件夹下创建css文件夹在css文件夹下创建public.less文件 public.less.wrap{......
  • vue学习面试题整理(day01)
    一、Vue的最大优势是什么?  简单易学,轻量级整个源码js文件不大,双向数据绑定,数据驱动视图,组件化,数据和视图分离,vue负责关联视图和数据,作者是中国人(尤雨溪),文档都是中文的,......
  • Vue3在Vite中配置scss并使用
     提出问题单个文件引入时,需要在每个 stylelang="scss"scoped标签下这样引入,每次都要手动引入非常麻烦,因此就想做全局配置@import"@/assets/scss/global.scss"......