Vue数组更新及过滤排序功能


Posted in Javascript onAugust 10, 2017

前面的话

Vue为了增加列表渲染的功能,增加了一组观察数组的方法,而且可以显示一个数组的过滤或排序的副本。本文将详细介绍Vue数组更新及过滤排序

变异方法

Vue 包含一组观察数组的变异方法,它们将会触发视图更新,包含以下方法

push() 接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度

pop() 从数组末尾移除最后一项,减少数组的length值,然后返回移除的项

shift() 移除数组中的第一个项并返回该项,同时数组的长度减1

unshift() 在数组前端添加任意个项并返回新数组长度

splice() 删除原数组的一部分成员,并可以在被删除的位置添加入新的数组成员

sort() 调用每个数组项的toString()方法,然后比较得到的字符串排序,返回经过排序之后的数组

reverse() 用于反转数组的顺序,返回经过排序之后的数组

<div id="example">
 <div>
 <button @click='push'>push</button>
 <button @click='pop'>pop</button>
 <button @click='shift'>shift</button>
 <button @click='unshift'>unshift</button>
 <button @click='splice'>splice</button>
 <button @click='sort'>sort</button>
 <button @click='reverse'>reverse</button>
 </div>
 <ul>
 <li v-for="item in items" >
  {{ item.message }}
 </li>
 </ul> 
</div>

<script>
var example = new Vue({
 el: '#example',
 data: {
 items: [
  {message: 'Foo' },
  {message: 'Bar' },
  {message: 'Baz' }
 ],
 addValue:{message:'match'}
 },
 methods:{
 push(){
  this.items.push(this.addValue)
 },
 pop(){
  this.items.pop()
 },
 shift(){
  this.items.shift()
 },
 unshift(){
  this.items.unshift(this.addValue)
 },
 splice(){
  this.items.splice(0,1)
 },
 sort(){
  this.items.sort()
 },
 reverse(){
  this.items.reverse()
 },
 }
})
</script>

非变异方法

变异方法(mutation method),顾名思义,会改变被这些方法调用的原始数组。相比之下,也有非变异(non-mutating method)方法,例如: filter(), concat(), slice() 。这些不会改变原始数组,但总是返回一个新数组。当使用非变异方法时,可以用新数组替换旧数组

concat() 先创建当前数组一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组

slice() 基于当前数组中一个或多个项创建一个新数组,接受一个或两个参数,即要返回项的起始和结束位置,最后返回新数组

map() 对数组的每一项运行给定函数,返回每次函数调用的结果组成的数组

filter() 对数组中的每一项运行给定函数,该函数会返回true的项组成的数组

<div id="example">
 <div>
 <button @click='concat'>concat</button>
 <button @click='slice'>slice</button>
 <button @click='map'>map</button>
 <button @click='filter'>filter</button>
 </div>
 <ul>
 <li v-for="item in items" >
  {{ item }}
 </li>
 </ul> 
</div>
<script>
var example = new Vue({
 el: '#example',
 data: {
 items: ['Foo','Bar','Baz'],
 addValue:'match'
 },
 methods:{
 concat(){
  this.items = this.items.concat(this.addValue)
 },
 slice(){
  this.items = this.items.slice(1)
 },
 map(){
  this.items = this.items.map(function(item,index,arr){
  return index + item; 
  })
 },
 filter(){
  this.items = this.items.filter(function(item,index,arr){
  return (index > 0); 
  })
 }
 }
})
</script>

以上操作并不会导致Vue丢弃现有DOM并重新渲染整个列表。Vue实现了一些智能启发式方法来最大化DOM元素重用,所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作

无法检测

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

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

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

<div id="example">
 <div>
 <button @click='setVal'>setVal</button>
 <button @click='setLength'>setLength</button>
 <button @click='pop'>pop</button>
 </div>
 <ul>
 <li v-for="item in items" >{{ item }}</li>
 </ul> 
 <p>{{ message }}</p> 
</div>
<script>
var watchFunc = function(){
 example.message = '数据发生变化';
 setTimeout(function(){
 example.message = '';
 },500); 
}
var example = new Vue({
 el: '#example',
 data: {
 items: ['Foo','Bar','Baz'],
 message:'',
 },
 watch:{
 items:watchFunc
 },
 methods:{
 pop(){
  this.items.pop()
 },
 setVal(){
  this.items[0]= 'match';
 },
 setLength(){
  this.items.length = 2;
 }
 }
})
</script>

以上代码中,直接设置值和长度使用watch不能检测到变化

以下两种方式都可以实现和vm.items[indexOfItem]=newValue相同的效果, 同时也将触发状态更新

// Vue.set
Vue.set(example1.items, indexOfItem, newValue)
// Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)

 

为了解决第二类问题,可以使用 splice

example1.items.splice(newLength)
<div id="example">
 <div>
 <button @click='setVal1'>setVal1</button>
 <button @click='setVal2'>setVal2</button>
 <button @click='setLength'>setLength</button>
 </div>
 <ul>
 <li v-for="item in items" >{{ item }}</li>
 </ul> 
 <p>{{ message }}</p> 
</div>
<script>
var watchFunc = function(){
 example.message = '数据发生变化';
 setTimeout(function(){
 example.message = '';
 },500); 
}
var example = new Vue({
 el: '#example',
 data: {
 items: ['Foo','Bar','Baz'],
 message:'',
 },
 watch:{
 items:watchFunc
 },
 methods:{
 setVal1(){
  Vue.set(this.items, 0, 'match')
 },
 setVal2(){
  this.items.splice(1, 1, 'xiaohuochai')
 }, 
 setLength(){
  this.items.splice(2)
 }
 }
})
</script>

过滤排序

有时,要显示一个数组的过滤或排序副本,而不实际改变或重置原始数据。在这种情况下,可以创建返回过滤或排序数组的计算属性

【computed】

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

【methods】

在计算属性不适用的情况下 (例如,在嵌套 v-for 循环中) 可以使用一个 method 方法

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

Vue数组更新及过滤排序功能

总结

以上所述是小编给大家介绍的Vue数组更新及过滤排序功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 系统文件夹文件操作及参数介绍
Jan 08 Javascript
使用js Math.random()函数生成n到m间的随机数字
Oct 09 Javascript
JavaScript控制按钮可用或不可用的方法
Apr 03 Javascript
JS获取鼠标坐标位置实例分析
Jan 20 Javascript
如何消除inline-block属性带来的标签间间隙
Mar 31 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
Jun 01 Javascript
node.js 中国天气预报 简单实现
Jun 06 Javascript
JS实现自动阅读单词(有道单词本添加功能)
Nov 14 Javascript
拖动时防止选中
Feb 03 Javascript
Vue实现自带的过滤器实例
Mar 09 Javascript
bootstrap paginator分页前后台用法示例
Jun 17 Javascript
如何在vue 中引入使用jquery
Nov 10 jQuery
Webpack性能优化 DLL 用法详解
Aug 10 #Javascript
详解React Native网络请求fetch简单封装
Aug 10 #Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 #jQuery
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
Aug 10 #Javascript
jquery.uploadView 实现图片预览上传功能
Aug 10 #jQuery
express框架实现基于Websocket建立的简易聊天室
Aug 10 #Javascript
bootstrap table服务端实现分页效果
Aug 10 #Javascript
You might like
php抛出异常与捕捉特定类型的异常详解
2016/10/26 PHP
一个关于javascript匿名函数的问题分析
2012/03/30 Javascript
a标签的href与onclick事件的区别详解
2014/11/12 Javascript
javascript实现简单的鼠标拖动效果实例
2015/04/10 Javascript
JavaScript实现将xml转换成html table表格的方法
2015/04/17 Javascript
JavaScript使用addEventListener添加事件监听用法实例
2015/06/01 Javascript
AngularJS学习笔记之基本指令(init、repeat)
2015/06/16 Javascript
基于html5和nodejs相结合实现websocket即使通讯
2015/11/19 NodeJs
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
2016/06/22 Javascript
jquery.flot.js简单绘制折线图用法示例
2017/03/13 Javascript
JS基于正则表达式的替换操作(replace)用法示例
2017/04/28 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
2017/06/17 Javascript
用js实现before和after伪类的样式修改的示例代码
2017/09/07 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
2018/08/13 Javascript
Vue组件创建和传值的方法
2018/08/17 Javascript
详解javascript replace高级用法
2019/02/17 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
2019/03/05 Javascript
postman自定义函数实现 时间函数的思路详解
2019/04/17 Javascript
js实现动态时钟
2020/03/12 Javascript
浅谈vue 二级路由嵌套和二级路由高亮问题
2020/08/06 Javascript
Python中内置的日志模块logging用法详解
2016/07/12 Python
Python自动化运维_文件内容差异对比分析
2017/12/13 Python
tensorflow 打印内存中的变量方法
2018/07/30 Python
Python函数any()和all()的用法及区别介绍
2018/09/14 Python
python将pandas datarame保存为txt文件的实例
2019/02/12 Python
Python获取Redis所有Key以及内容的方法
2019/02/19 Python
华为2019校招笔试题之处理字符串(python版)
2019/06/25 Python
pyqt5 使用cv2 显示图片,摄像头的实例
2019/06/27 Python
使用iframe+postMessage实现页面跨域通信的示例代码
2020/01/14 HTML / CSS
马来西亚户外装备商店:PTT Outdoor
2019/07/13 全球购物
意大利领先的奢侈品在线时装零售商:MCLABELS
2020/10/13 全球购物
个人实用简单的自我评价
2013/10/19 职场文书
2014乡镇班子个人对照检查材料思想汇报
2014/09/26 职场文书
资料员岗位职责范本
2015/04/13 职场文书
公司车队管理制度
2015/08/04 职场文书
KVM基础命令详解
2022/04/30 Servers