【VUE】常用函数

转载:https://www.cnblogs.com/yangchongxing/p/10637087.html

目录

==================================================

1、变异方法

2、替换数组

3、修改数组

==================================================

1、变异方法

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

this.items.push({msg:'n1'})
this.items.push({msg:'n1'},{msg:'n2'})

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

this.items.pop()

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

this.items.unshift({msg:'n1'})
this.items.unshift({msg:'n1'},{msg:'n2'})

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

this.items.shift()

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

splice(length) 设置长度

splice(index, len, [item])

添加,在索引1的位置
this.items.splice(1,0,{msg:'n1'})
this.items.splice(1,0,{msg:'n1'},{msg:'n2'})
删除,从索引1开始,删除2个含索引
this.items.splice(1,2)
替换,从索引1开始,替换1个含索引
this.items.splice(1,1,{msg:'n'})
this.items.splice(1,2,{msg:'n'}) 替换2个

sort() 方法用于对数组的元素进行排序。按照字符编码默认从小到大排序

默认字母排序

this.items.sort()

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

this.items.reverse()

1、替换数组

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

this.items.filter(function (item) {
return item.message.match(/Foo/)
})

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

this.items.concat([{message:'JJ'},{message:'BB'}])

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

this.items.slice(开始索引, 结束索引)   结束索引不包含
this.items.slice(开始索引) 从开始到结尾
索引为负数时,数组长度加上负数索引就是使用的索引

3、修改数组

this.items[1] = { message: 'Bar m' }  修改不响应
解决方式,一下三种都可以
Vue.set(this.items, 1, { message: 'Bar11' })
vm.$set(this.items, 1, { message: 'Bar22' })
this.items.splice(1, 1, { message: 'Bar33' })
this.items.length = 2  修改不响应
解决方式
this.items.splice(2)

其他

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

【VUE】数组的更多相关文章

  1. [one day one question] Vue数组变更不能触发刷新

    问题描述:Vue数组变更不能触发刷新,特别是数组的每个元素都是对象的时候,对象中某个属性的值发生变化,根本无法触发Vue的dom刷新,这怎么破? 解决方案:this.$set(array, index ...

  2. vue 数组渲染问题

    vue 数组渲染问题 问题一: 用v-for循环渲染数组数据时,数据更新了,视图却没有更新 由于 JavaScript 的限制, Vue 不能检测以下变动的数组: 1. 当你利用索引直接设置一个项时, ...

  3. vue数组变异方法

    Vue数组变异方法,会改变被这些方法调用的原始数组,将会触发视图更新 push() 接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度 pop() 从数组末尾移除最后一项,减少数组的 ...

  4. Vue数组更新及过滤排序

    前面的话 Vue为了增加列表渲染的功能,增加了一组观察数组的方法,而且可以显示一个数组的过滤或排序的副本.本文将详细介绍Vue数组更新及过滤排序 变异方法 Vue 包含一组观察数组的变异方法,它们将会 ...

  5. vue 数组 新增元素 响应式原理 7种方法

    1.问题 思考一个问题,以下代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  6. vue 数组更新 this.$set(this.dataList, data.index, data.data)

    vue 数组更新 this.$set(this.dataList, data.index, data.data) https://www.cnblogs.com/huangenai/p/9836811 ...

  7. vue 数组和对象渲染问题

    vue 数组和对象渲染问题 最近项目有点忙碌,遇到好多问题都没有总结(╥﹏╥),在开发过程中,取vuex中的数组渲染完成之后,再次修改数组的值,数据更新了,但是视图并没有更新.以为是数组更新的问题,后 ...

  8. vue 数组对接字符串 传值时候,join(',') 一下 watch

    vue 数组对接字符串 传值时候,join(',') 一下 watch watch: { 'tFill.otherDescArr': function (newVal, oldVal) { this. ...

  9. vue数组更新界面无变化

    1. vue数组更新界面无变化 1.1. 说明 对数组进行更新或者添加,一定要注意方式,我的情况是数组套数组,双重循环,在造数据的时候,不断从尾部添加数据,所以写成了如下形式,每次下拉都会去加载一批相 ...

  10. WTF!! Vue数组splice方法无法正常工作

    当函数执行到this.agents.splice()时,我设置了断点.发现传参index是0,但是页面上的列表项对应的第一行数据没有被删除, WTF!!! 这是什么鬼!然后我打开Vue Devtool ...

随机推荐

  1. Python常用模块之os.path

    os.path.abspath(path) 输入相对路径,返回绝对路径 Python 3.7.0 (v3.7.0:1bf9cc5093, Jun 27 2018, 04:59:51) [MSC v.1 ...

  2. 查找文件或目录(find、locate、whereis、which、whatis)

    find命令:可以按文件名.文件的类型.用户等条件来递归查找文件或目录 find  [路径]  [匹配表达式] ,常用选项如下 -name filename  按文件名 -user username ...

  3. mysql5.7下载与安装

    一.完全卸载旧版mysql 参考文章:https://blog.csdn.net/hui1setouxiang/article/details/89816176 二.win10中下载安装mysql5. ...

  4. python进程概要

    进程 狭义:正在运行的程序实例. 广义:进程是一个具有一定独立功能的程序关于某个数据集合的一次运行活动,他是操作系统动态执行的基本单元. python的进程都是并行的. 并行:两个进程同时执行一起走. ...

  5. SQL Server Management Studio 安装流程

    数据库的操作需要使用SQL Server Management Studio,不过也可以使用其他的: 下面是安装操作的步骤:如果你下载的压缩包,你需要先解压到一个文件夹里,然后双击setup.exe, ...

  6. Google Chrome浏览器的编码格式的修改步骤

    Chrome  Charset插件 大二萌新正在学JavaEE,当学到TomCat时,用到浏览器,但是呢,出现了中文乱码的情况,而又用的是Google,可烦恼了,由于Google Chrome的更新, ...

  7. windows 10 上源码编译OpenCV并支持CUDA | compile opencv with CUDA support on windows 10

    本文首发于个人博客https://kezunlin.me/post/6580691f/,欢迎阅读! compile opencv with CUDA support on windows 10 Ser ...

  8. IPv6,无需操作就可升级?

    最近这段时间,5G 出现在你能看到的各种信息里,铺天盖地的宣传提醒着大家新一代互联网的到来.其实早在几年前 5G 就有所提及,可是为什么到现在才开始窜上热门呢?这就涉及到了 IPv6. 或许有不少朋友 ...

  9. LMS自适应天线阵列设计 MATLAB

    在自适应天线课上刚刚学了LMS自适应阵,先出一个抢先版贴一下结果,抢先某个小朋友一步. 关于LMS的具体介绍,直接看wiki里的吧,解释的比书上简明:传送门:https://en.wikipedia. ...

  10. 推荐收藏系列:一文理解JVM虚拟机(内存、垃圾回收、性能优化)解决面试中遇到问题(图解版)

    欢迎一起学习 <提升能力,涨薪可待篇> <面试知识,工作可待篇 > <实战演练,拒绝996篇 > 欢迎关注我博客 也欢迎关注公 众 号[Ccww笔记],原创技术文章 ...