【VUE】数组
【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】数组的更多相关文章
- [one day one question] Vue数组变更不能触发刷新
问题描述:Vue数组变更不能触发刷新,特别是数组的每个元素都是对象的时候,对象中某个属性的值发生变化,根本无法触发Vue的dom刷新,这怎么破? 解决方案:this.$set(array, index ...
- vue 数组渲染问题
vue 数组渲染问题 问题一: 用v-for循环渲染数组数据时,数据更新了,视图却没有更新 由于 JavaScript 的限制, Vue 不能检测以下变动的数组: 1. 当你利用索引直接设置一个项时, ...
- vue数组变异方法
Vue数组变异方法,会改变被这些方法调用的原始数组,将会触发视图更新 push() 接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度 pop() 从数组末尾移除最后一项,减少数组的 ...
- Vue数组更新及过滤排序
前面的话 Vue为了增加列表渲染的功能,增加了一组观察数组的方法,而且可以显示一个数组的过滤或排序的副本.本文将详细介绍Vue数组更新及过滤排序 变异方法 Vue 包含一组观察数组的变异方法,它们将会 ...
- vue 数组 新增元素 响应式原理 7种方法
1.问题 思考一个问题,以下代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- 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 ...
- vue 数组和对象渲染问题
vue 数组和对象渲染问题 最近项目有点忙碌,遇到好多问题都没有总结(╥﹏╥),在开发过程中,取vuex中的数组渲染完成之后,再次修改数组的值,数据更新了,但是视图并没有更新.以为是数组更新的问题,后 ...
- vue 数组对接字符串 传值时候,join(',') 一下 watch
vue 数组对接字符串 传值时候,join(',') 一下 watch watch: { 'tFill.otherDescArr': function (newVal, oldVal) { this. ...
- vue数组更新界面无变化
1. vue数组更新界面无变化 1.1. 说明 对数组进行更新或者添加,一定要注意方式,我的情况是数组套数组,双重循环,在造数据的时候,不断从尾部添加数据,所以写成了如下形式,每次下拉都会去加载一批相 ...
- WTF!! Vue数组splice方法无法正常工作
当函数执行到this.agents.splice()时,我设置了断点.发现传参index是0,但是页面上的列表项对应的第一行数据没有被删除, WTF!!! 这是什么鬼!然后我打开Vue Devtool ...
随机推荐
- 从壹开始 [ Design Pattern ] 之一 ║ 设计模式开篇讲
缘起 不说其他的没用的开场白了,直接给大家分享三个小故事,都来自于我的读者粉丝(我厚着脸皮称为粉丝吧
- 解决FirewallD is not running问题
centos7 1.查看firewalld状态:systemctl status firewalld,如果是dead状态,即防火墙未开启. 2.开启防火墙systemctl start firewal ...
- Cygwin安装教程
cygwin是一个在windows平台上运行的unix模拟环境,是cygnus solutions公司开发的自由软件. 它对于学习unix/linux操作环境,或者从unix到windows的应用程序 ...
- oracle中两个服务器连接中sys密码修改问题
问题描述:orcl服务器要连接orclstd 想要sqlplus sys/410526@orclstd as sysdba 连接orclstd数据库,但是发现啥意思密码不对,就对sys密码进行重新设置 ...
- 微信中使用popup等弹窗组件时点击输入框input键盘弹起导致IOS中按钮无效处理办法
因为在IOS微信中在弹窗中使用input使键盘弹起,使弹窗的位置上移,当键盘关闭时页面还在上面,弹窗位移量也在上面,只有下拉才能回到原位,这样弹窗也消失了.我的处理办法就是在键盘弹起和消失的时候,让页 ...
- [ch03-00] 损失函数
系列博客,原文在笔者所维护的github上:https://aka.ms/beginnerAI, 点击star加星不要吝啬,星越多笔者越努力. 第3章 损失函数 3.0 损失函数概论 3.0.1 概念 ...
- Git及Github
目录 Git及Github的使用 Git的基本介绍 Git命令行操作 1.设置签名 2.创建本地库 3.仓库初始化 4.状态查看 5.添加文件 6.提交文件 7.历史记录 8.前进后退 9.删除文件 ...
- Linux发展史及安装
操作系统 什么是操作系统 人与硬件的中介/桥梁 操作系统的组成 操作系统可以理解为一个鸡蛋 蛋黄 内核 Linux内核 托瓦斯 鸡蛋清 命令解释器(s ...
- Ztree树增删改查菜单,遇到的问题总结
一.引言 我今天做了一个Ztree树增删改查菜单的功能.其中遇到了很多坑爹的问题,和大家讲述一下. 二.代码展示 1.Ztree树前台代码 <%@ page language="jav ...
- 【Android - 进阶】之Animation补间动画
补间动画也叫View动画,它只能针对View进行动画操作,且补间动画操作的只是View中可见的部分,即只操作界面,对于可点击区域等都不会进行操作. 在Android中,补间动画的顶级类是Animati ...