vue 数组元素替换_11. VUE 数组操作
变异方法
Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新。这些方法如下:
push() 添加元素
{{ item.message }}
varexample1= newVue({
el:'#example-1',
data: {
items: [
{message:'Foo'},
{message:'Bar'}
]
}
});
example1.$data.items.push({message :'test'});
pop() 删除最后一个元素
example1.$data.items.pop();
shift() 删除第一个元素
example1.$data.items.shift();
unshift() 添加一个元素到数组最前面
example1.$data.items.unshift({message :'hi..'});
splice() 方法用于插入、删除或替换数组的元素
参数 描述
index 必需。规定从何处添加/删除元素。该参数是开始插入和(或)删除的数组元素的下标,必须是数字。
howmany 必需。规定应该删除多少元素。必须是数字,但可以是 "0"。如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。
item1, ..., itemX 可选。要添加到数组的新元素
example1.$data.items.splice(0,1,{message:'splice'});
sort() 排序(升序)
{{ item }}
varexample1= newVue({
el:'#example-1',
data: {
items: [2,3,4]
}
});
example1.$data.items.sort();
reverse() 排序(降序)
example1.$data.items.reverse();
重塑数组
变异方法(mutation method),顾名思义,会改变被这些方法调用的原始数组。相比之下,也有非变异(non-mutating method)方法,例如: filter(), concat() 和 slice() 。这些不会改变原始数组,但总是返回一个新数组。当使用非变异方法时,可以用新数组替换旧数组:
example1.items = example1.items.filter(function (item) {
return item.message.match(/Foo/)
})
你可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是,事实并非如此。 Vue 实现了一些智能启发式方法来最大化 DOM 元素重用,所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。
filter() 数组元素过滤
{{ n }}
varexample1= newVue({
el:'#example-1',
data: {
numbers: [1,2,3,4,5]
},
methods : {
even :function(){return this.numbers.filter(function(number) {returnnumber% 2 === 0;
});
}
}
});
注意事项
由于 JavaScript 的限制, Vue 不能检测以下变动的数组:
当你利用索引直接设置一个项时,例如: vm.items[indexOfItem] = newValue
当你修改数组的长度时,例如: vm.items.length = newLength
为了解决第一类问题,以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果, 同时也将触发状态更新:
// Vue.set
Vue.set(example1.items, indexOfItem, newValue)
例子:
{{ item.message }}
varexample1= newVue({
el:'#example-1',
data: {
items: [
{message:'Foo'},
{message:'Bar'},
{message:'hcoder'}
]
}
});//example1.items[3] = {message : 'test...'};
Vue.set(example1.items,3, {message :'test...'});
vue 数组元素替换_11. VUE 数组操作相关推荐
- 数组元素替换_Linux Shell 通俗简要的讲解数组操作
Shell 数组 什么是数组?学过计算机编程语言的同学们都知道,数组的特性就是一组数据类型相同的集合 Bash Shell 数组中可以存放多个值,且只支持一维数组(不支持多维数组),初始化时不需要定义 ...
- ruby 数组元素替换_从Ruby中的集合中删除并替换元素
ruby 数组元素替换 Ruby has various specific methods to fulfil specific tasks. At several places, you may n ...
- 前端:JS/20/数组(数组的概念,数组元素,数组索引,数组元素的访问,数组的长度,数组的创建方法,数组的操作,实例:使用数组保存个人信息,实例:求数组所有值的平均值,数组对象的length属性)
数组 1,数组的概念 一组值(或对象)的集合,称为"数组": var arr =[10,20,30,50]; var arr =["张三","男&qu ...
- java对象数组元素替换实例
对象数组元素替换实例(普通方法) import java.util.Scanner; //对象数组的元素替换,原理是检索下标用新内容替换掉旧内容 public class Test1 {String ...
- 在c语言中引用数组元素时,其数组下标的数据类型允许是什么
在c语言中引用数组元素时,其数组下标的数据类型允许是:整型常量或整型表达式.C语言规定只能逐个引用数组元素而不能一次引用整个数组,数据元素的表示形式为"数组名[下标]",下标可以是 ...
- Numpy 生成 Bool型数组、一维转多维数组reshape、多维转一维数组、替换数组元素、提取数组元素、数组交集、差集、过滤数组元素、二维数组反转行、交换数组维度
1. 创建一个 [3,5] 所有元素为 True 的数组 In [162]: b = np.ones((3,5), dtype=bool)In [163]: b Out[163]: array([[ ...
- 数组元素替换_LeetCode 题解 | 189. 旋转数组
力扣 189. 旋转数组(点击查看题目) 题目描述 给定一个数组,将数组中的元素向右移动 k 个位置,其中 k 是非负数. 示例 1: 示例 2: 说明: 尽可能想出更多的解决方案,至少有三种不同的方 ...
- 【C 语言】数组 ( 多维数组操作模型 | 取某个数组元素地址 | 取某个数组元素值 )
文章目录 一.多维数组操作模型 1.取出某个数组元素地址 2.取出某个数组元素值 总结 一.多维数组操作模型 以 // 声明一个多维数组int array[2][3]; 二维数组为例 ; 1.取出某个 ...
- shell 数组元素有空格_Shell数组操作
1.数组定义 1.1 declare定义 使用declare -a 命令定义数组(数组的索引是从0开始计数的),接下来就可以通过[]操作符为不同索引位置的元素赋值. declare -a names ...
最新文章
- 作为面试官的一点小感想
- python四十九:封装
- Angular应用带参数的路由实现
- 使用 Autofac 进行依赖注入
- python123阶乘累加_使用多线程计算阶乘累加 1!+2!+3!+...+19!+20!。其中一个线程计算阶乘,另一线程实现累加并输出结果。...
- cv2读取np的矩阵图片,numpy数组clip和astype,查看数据类型array.dtype
- Zigbee 学习计划——第5天——无线传输质量检测
- 计算机录音机应用程序在哪,Windows录音机在哪 电脑录音机怎么用
- CreateThread函数,无法将参数 3 从“DWORD (__cdecl *)(LPVOID)”转换为“LPTHREAD_START_ROUTINE” PVZCheater
- chm 乱码 掌阅_chm文件中文乱码问题
- 计算机分盘介质受写入保护,“介质受写入保护”的解决(适用于U盘或移动硬盘)...
- storyboard(故事版)新手教程 图文详解 2.为无约束的故事版添加约束
- 树莓派配置https://www.raspberrypi.org/documentation/configuration/中的一个单词翻译:
- 车载毫米波雷达测试(1)_关于雷达的目标检测性能测试与雷达模拟器
- 推荐系统组队学习之协同过滤
- 在windows系统中安装Sulley
- 戴尔服务器能用大白菜装系统吗,戴尔如何用u盘装系统xp
- UML 之 UML中的关系
- 安装redis时 提示执行make命令时提示 CC adlist.o /bin/sh: cc: 未找到命令
- 2018函授英语计算机统考,大学英语b网络统考