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 相关文章推荐
js函数获取html中className所在的内容并去除标签
Sep 08 Javascript
JavaScript弹出窗口方法汇总
Aug 12 Javascript
静态页面html中跳转传值的JS处理技巧
Jun 22 Javascript
AngularJS ng-app 指令实例详解
Jul 30 Javascript
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
基于Bootstrap table组件实现多层表头的实例代码
Sep 07 Javascript
移动端效果之IndexList详解
Oct 20 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
Dec 17 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
Jul 22 Javascript
javascript使用正则表达式实现注册登入校验
Sep 23 Javascript
vue+echarts实现多条折线图
Mar 21 Vue.js
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
codeigniter中实现一次性加载多个view的方法
2015/03/20 PHP
CodeIgniter针对lighttpd服务器URL重写的方法
2015/06/10 PHP
Ubuntu server 11.04安装memcache及php使用memcache来存储session的方法
2016/05/31 PHP
PHP中如何使用Redis接管文件存储Session详解
2018/11/28 PHP
PHP7移除的扩展和SAPI
2021/03/09 PHP
YUI 读码日记之 YAHOO.lang.is*
2008/03/22 Javascript
javascript之典型高阶函数应用介绍二
2013/01/10 Javascript
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
2013/03/01 Javascript
高效的获取当前元素是父元素的第几个子元素
2013/10/15 Javascript
jquery获得keycode的示例代码
2013/12/30 Javascript
超级好用的jQuery圆角插件 Corner速成
2014/08/31 Javascript
JavaScript中的类数组对象介绍
2014/12/30 Javascript
JAVA四种基本排序方法实例总结
2015/07/24 Javascript
javascript实现检验的各种规则
2015/07/31 Javascript
JS+CSS实现六级网站导航主菜单效果
2015/09/28 Javascript
jQuery Validate初步体验(一)
2015/12/12 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
2015/12/31 Javascript
JavaScript时间操作之年月日星期级联操作
2016/01/15 Javascript
Web Uploader文件上传插件使用详解
2016/05/10 Javascript
JS使用eval()动态创建变量的方法
2016/06/03 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
2019/04/15 Javascript
vue读取本地的excel文件并显示在网页上方法示例
2019/05/29 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
2020/12/19 Vue.js
python操作xml文件详细介绍
2014/06/09 Python
Python实现判断字符串中包含某个字符的判断函数示例
2018/01/08 Python
快速了解Python相对导入
2018/01/12 Python
python实现文件的备份流程详解
2019/06/18 Python
简单了解python变量的作用域
2019/07/30 Python
python实现飞机大战游戏(pygame版)
2020/10/26 Python
python查看矩阵的行列号以及维数方式
2020/05/22 Python
PyQt5结合matplotlib绘图的实现示例
2020/09/15 Python
Python代码覆盖率统计工具coverage.py用法详解
2020/11/25 Python
python中操作文件的模块的方法总结
2021/02/04 Python
HTML5 canvas基本绘图之绘制线段
2016/06/27 HTML / CSS
2016年学校“3.12”植树节活动总结
2016/03/16 职场文书
求职信:会计求职的写作技巧
2019/04/24 职场文书