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

前面的话

  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数组更新及过滤排序功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • Vue.js每天必学之过滤器与自定义过滤器

    基础 类似于自定义指令,可以用全局方法 Vue.filter() 注册一个自定义过滤器,它接收两个参数:过滤器 ID 和过滤器函数.过滤器函数以值为参数,返回转换后的值: Vue.filter('reverse', function (value) { return value.split('').reverse().join('') }) <!-- 'abc' => 'cba' --> <span v-text="message | reverse">&

  • Vue.js -- 过滤器使用总结

    过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,过滤器通常会使用管道标志 " | ", 比如: {{ msg | capitalize }} // 'abc' => 'ABC' uppercase过滤器 : 将输入的字符串转换成大写字母的过滤器. VueJs允许你链式调用过滤器,简单的来说,就是一个过滤器的输出成为下一个过滤器的输入,然后再次过滤.接下来,我们可以想象一个比较简单的例子,使用了Vue的 filterBy +

  • Vue过滤器的用法和自定义过滤器使用

    1.过滤器的用法,用  '|' 分割表达式和过滤器. 例如:{{ msg |  filter}}     {{msg | filter(a)}}  a就标识filter的一个参数. 用两个过滤器:{{msg | myfilter | myfilternumber }} 2.自定义的过滤器 过滤器的结构为:Vue.filter("id",function(value,a){}); value是过滤器的一个参数,也是默认的原始值.a是自定义的一个参数. 自定义过滤器的例子: <!DO

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

    前面的话 Vue为了增加列表渲染的功能,增加了一组观察数组的方法,而且可以显示一个数组的过滤或排序的副本.本文将详细介绍Vue数组更新及过滤排序 变异方法 Vue 包含一组观察数组的变异方法,它们将会触发视图更新,包含以下方法 push() 接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度 pop() 从数组末尾移除最后一项,减少数组的length值,然后返回移除的项 shift() 移除数组中的第一个项并返回该项,同时数组的长度减1 unshift() 在数组前端添加任意个

  • 详解VUE 数组更新

    1.数据方法分类: (1)原数组改变 push  pop  unshift  shift  reverse  sort  splice (2)原数组未变,生成新数组 slice  concat  filter 对于使原数组变化的方法,可以直接更新视图. 对于原数组未变的方法,可以使用新数组替换原来的数组,以使视图发生变化. 示例代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset=&

  • vue 数据遍历筛选 过滤 排序的应用操作

    vue 中对v-for 遍历数据的处理方式 可以分为两类 : 一.对data 直接赋值(比较笨,但是比较直接) <div id="app"> <ul> <li v-for="item in list">{{item.n}}</li> </ul> </div> </body> <script> var app=new Vue({ el:'#app', data:{ list

  • vue中实现拖拽排序功能的详细教程

    目录 原生拖拽 API 实现拖拽 设置元素 dragable 拖放事件 拖拽排序 拖拽API + 防抖实现 vue awe-dnd 拖拽组件 安装 awe-dnd 组件库 在 main.js 中将 awe 挂载到全局 实现案例 项目中-- 拖拽的效果 不理想 vue-smooth-DnD 安装 smooth-dnd API: container smooth-dnd 生命周期 回调 事件 API: Draggable 效果实现 项目中实现 – 拖拽位置无法确定 vuedraggable 安装 引

  • vue.js中$set与数组更新方法

    由于 JavaScript 的限制,Vue 不能检测以下变动的数组: 当利用索引直接设置数组的某一项时,例如:vm.items[indexOfItem] = newValue 当你修改数组的长度时,例如:vm.items.length = newLength,不会更新数组. 当然vue中给了解决方法,就是使用 Vue.set, vm.$set(Vue.set的变种写法)或者 splice,caoncat等修改数组,同时也将触发状态更新: ex: 所以如果在实例创建后添加新的属性到实例上,则不会触

  • PHP 二维数组根据某个字段排序的具体实现

    本文记录的要实现的功能类似于 MySQL 中的 ORDER BY,上个项目中有遇到这样的一个需求. 要求:从两个不同的表中获取各自的4条数据,然后整合(array_merge)成一个数组,再根据数据的创建时间降序排序取前4条. 遇到这个要求的时候就不是 ORDER BY 能解决的问题了.因此翻看 PHP 手册查找到了如下方法,做此笔记. 废话少说,奉上代码,清单如下: 复制代码 代码如下: <?php /** * 二维数组根据某个字段排序 * 功能:按照用户的年龄倒序排序 * @author r

  • Android实现ListView的A-Z字母排序和过滤搜索功能 实现汉字转成拼音

    直入主题,今天给大家带来ListView的A-Z字母排序和过滤搜索功能并且实现汉字转成拼音的功能,我们知道一般我们对联系人,城市列表等实现A-Z的排序,因为联系人和城市列表我们可以直接从数据库中获取他的汉字拼音,而对于一般的数据,我们怎么实现A-Z的排序,我们需要将汉字转换成拼音就行了,接下来就带大家实现一般数据的A-Z排序功能,首先先看下效果图 上面是一个带删除按钮的EditText,我们在输入框中输入可以自动过滤出我们想要的东西,当输入框中没有数据自动替换到原来的数据列表,然后下面一个Lis

  • vue实现页面div盒子拖拽排序功能

    vue 实现页面div盒子拖拽排序功能前言:目前市面上有很多实现拖拽排序功能的插件和方法,本节不过多累述,只讲一种:css3的transition-group方法 效果图: 1. DOM中使用: <transition-group class="container" name="sort"> <div class="app-item" v-for="app in customApps" :key="

  • Vue实现拖放排序功能的实例代码

    Vue中实现拖放排序,啥也不说,贴上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> ul { min-height: 100px; width: 200px; margin: 20px auto; backgrou

  • vue实现列表拖拽排序的功能

    在日常开发中,特别是管理端,经常会遇到要实现拖拽排序的效果:这里提供一种简单的实现方案. 此例子基于vuecli3 首先,我们先了解一下js原生拖动事件: 在拖动目标上触发事件 (源元素): ondragstart - 用户开始拖动元素时触发 ondrag - 元素正在拖动时触发 ondragend - 用户完成元素拖动后触发 释放目标时触发的事件: ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件 ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触

随机推荐