变异方法

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

push() 添加元素

<ul id="example-1">
<li v-for="item in items" :key="item.id">{{ item.message }} </li>
</ul>
<script type="text/javascript">
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{message: 'Foo' },
{message: 'Bar' }
]
}
});
example1.$data.items.push({message : 'test'});
</script>

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() 排序(升序)

<ul id="example-1">
<li v-for="item in items" :key="item.id">{{ item }} </li>
</ul>
<script type="text/javascript">
var example1 = new Vue({
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() 数组元素过滤

<ul id="example-1">
<li v-for="n in even()">{{ n }}</li>
</ul>
<script type="text/javascript">
var example1 = new Vue({
el: '#example-1',
data: {
numbers: [ 1, 2, 3, 4, 5 ]
},
methods : {
even : function(){
return this.numbers.filter(function (number) {
return number % 2 === 0;
});
}
}
});
</script>

注意事项

由于 JavaScript 的限制, Vue 不能检测以下变动的数组:

当你利用索引直接设置一个项时,例如: vm.items[indexOfItem] = newValue

当你修改数组的长度时,例如: vm.items.length = newLength

为了解决第一类问题,以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果, 同时也将触发状态更新:

// Vue.set

Vue.set(example1.items, indexOfItem, newValue)

例子:

<ul id="example-1">
<li v-for="item in items" :key="item.id">{{ item.message }} </li>
</ul>
<script type="text/javascript">
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{message: 'Foo' },
{message: 'Bar' },
{message: 'hcoder'}
]
}
});
//example1.items[3] = {message : 'test...'};
Vue.set(example1.items, 3, {message : 'test...'});
</script>

转载:https://blog.csdn.net/qq_36838191/article/details/80849591

11. VUE 数组操作的更多相关文章

  1. 关于Vue数组操作

    Vue的数组操作的实现代码大致如下: const aryMethods = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse ...

  2. Vue数组操作不刷新视图问题的解决

    最近使用Vue2.0开发项目,有一个列表使用v-for绑定到数组,按照Vue的推荐方案,使用push.splice.this.$set三个变异方法操作数组.发现在添加页面,三个方法都能及时刷新视图:但 ...

  3. 【vuejs】vue数组操作

    问题:两种操作都能给数组添加数据,但是利用下标添加数据不会自动在视图中渲染,这个是和vue自己的规定有关,这里记录一下 网上到原因,这里附转载链接 点我传送 官网相关说明传送门

  4. vue数组操作不更新视图问题

    vue 观察数组的变异方法 更新视图 push() pop() shift() unshift() splice(i,n,arr) sort(xx) reverse() ex: app.book.pu ...

  5. vue数组操作不触发前端重新渲染

    暂时使用给数组先赋值 [ ] ,然后重新赋值的方式解决. 此外,能够监听的数组变异方法 https://cn.vuejs.org/v2/guide/list.html#%E5%8F%98%E5%BC% ...

  6. 包括ES6在内的数组操作(待更)

    下面是我对ES6和古老的JS(ES3)一些数组操作的总结,附带了一些我曾经用上的. map处有待更内容. 贴一下有借鉴的网站:https://segmentfault.com/a/1190000002 ...

  7. JavaScript jQuery 中定义数组与操作及jquery数组操作

    首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象Javascript不支持多 ...

  8. OC2_数组操作

    // // main.m // OC2_数组操作 // // Created by zhangxueming on 15/6/11. // Copyright (c) 2015年 zhangxuemi ...

  9. javaScript数组操作整理

    一.js数组 1.创建数组: var arr = new Array();//创建没有元素空数组 var arr1 = new Array("value1","valeu ...

随机推荐

  1. Spring中的@Enable注解

    本文转载自SpringBoot中神奇的@Enable注解? 导语 在SpringBoot开发过程,我们经常会遇到@Enable开始的好多注解,比如@EnableEurekaServer.@Enable ...

  2. 导出----用Excel导出数据库表

    根据条件导出表格: 前端 <el-form-item label=""> <el-button type="warning" icon=&qu ...

  3. 程序员如何在VsCode上看基金?

    一 我是一个程序员. 代码是我的禁锢,基金是我的自由. 打破禁锢,奔向自由,也许只差几个定投. 有人说,买基金一定要心态好,要学会风险对冲,把8成的钱全仓买基金,剩余2成买意外身亡险,基金大涨就赚,基 ...

  4. 【随便写写】印象笔记,WordPress,CSDN 等 写博客的不同

    之前有的文章,写在了印象笔记里面,有的文章,写在了自己的WordPress博客里面,但是,感觉还是需要在主流平台分享一下文章的.就再次写写文章吧.(PS:公众号最重要的不是写作,而是排版) 说说几个这 ...

  5. HDOJ-1560(迭代加深搜索问题)

    DNA sequence HDOJ-1560 *本题是迭代加深搜索问题,主要是要理解题目,题目中一定是有解的,所以为了找最小的解,可以从小的搜索深度开始逐渐增加. *这里有个技巧就是,如果本次指定开始 ...

  6. MySQL日志收集之Filebeat和Logstsh的一键安装配置(ELK架构)

    关于ELK是什么.做什么用,我们不在此讨论.本文重点在如何实现快速方便地安装logstash和filebeat组件,特别是在近千台DB Server的环境下(为了安全保守,公司DB Server 目前 ...

  7. 关于PHP的__construct()函数

    1 <?php 2 header("Content-Type:text/html;charset=utf-8");//调整为utf-8编码格式 3 class car 4 { ...

  8. FPGA的开发板

    板卡架构 板载FPGA(K7-325T)处理24端口10/100/1000M以太网数据: FPGA外挂4Gbit的DDR3颗粒,最大支持800MHz: 板载CPU进行系统配置.管理,并与客户端软件通信 ...

  9. 图文详解:内存总是不够,我靠HBase说服了Leader为新项目保驾护航

  10. [LOJ 572] Misaka Network 与求和

    一.题目 点此看题 二.解法 直接推柿子吧: \[\sum_{i=1}^n\sum_{j=1}^nf(\gcd(i,j))^k \] \[\sum_{d=1}^nf(d)^k\sum_{i=1}^{n ...