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 19 Javascript
HTTP 304错误的详细讲解
Nov 13 Javascript
jquery获取css中的选择器(实例讲解)
Dec 02 Javascript
JavaScript定义类和对象的方法
Nov 26 Javascript
学习JavaScript设计模式之中介者模式
Jan 14 Javascript
Javascript中的几种继承方式对比分析
Mar 22 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
Sep 05 Javascript
深入理解js中的加载事件
Feb 08 Javascript
react-router4 嵌套路由的使用方法
Jul 24 Javascript
使用DataTable插件实现异步加载数据
Nov 19 Javascript
Node.js操作MongoDB数据库实例分析
Jan 19 Javascript
在vue中使用console.log无效的解决
Aug 09 Javascript
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
深入了解php4(1)--回到未来
2006/10/09 PHP
一些PHP写的小东西
2006/12/06 PHP
PHP中对于浮点型的数据需要用不同的方法解决
2014/03/11 PHP
浅析php-fpm静态和动态执行方式的比较
2016/11/09 PHP
JS实现定时页面弹出类似QQ新闻的提示框
2013/11/07 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
2015/04/27 Javascript
原生js实现自由拖拽弹窗代码demo
2016/06/29 Javascript
JavaScript队列函数和异步执行详解
2017/06/19 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
2018/01/10 Javascript
vue组件编写之todolist组件实例详解
2018/01/22 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
2018/08/27 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
2020/05/10 Javascript
python实现基本进制转换的方法
2015/07/11 Python
Python数据分析之真实IP请求Pandas详解
2016/11/18 Python
Python创建xml文件示例
2017/03/22 Python
python 简单的绘图工具turtle使用详解
2017/06/21 Python
Python多线程threading模块用法实例分析
2019/05/22 Python
python用quad、dblquad实现一维二维积分的实例详解
2019/11/20 Python
Django项目uwsgi+Nginx保姆级部署教程实现
2020/04/19 Python
PyQt5结合matplotlib绘图的实现示例
2020/09/15 Python
python不同版本的_new_不同点总结
2020/12/09 Python
Python约瑟夫生者死者小游戏实例讲解
2021/01/04 Python
CSS3中的content属性使用示例
2015/07/20 HTML / CSS
navabi英国:设计师大码女装
2019/06/25 全球购物
几道PHP的面试题
2012/05/19 面试题
工程造价与财务管理专业应届生求职信
2013/10/06 职场文书
集团公司总经理岗位职责
2013/12/20 职场文书
分公司总经理岗位职责
2014/08/03 职场文书
党员评议表自我评价范文
2014/10/20 职场文书
2015人事行政工作总结范文
2015/05/21 职场文书
民事代理词范文
2015/05/25 职场文书
2016新年问候语大全
2015/11/11 职场文书
小学语文教师研修感悟
2015/11/18 职场文书
HTML中table表格拆分合并(colspan、rowspan)
2021/04/07 HTML / CSS
MySQL之高可用集群部署及故障切换实现
2021/04/22 MySQL
Python中非常使用的6种基本变量的操作与技巧
2022/03/22 Python