v-for的显示过滤/排序结果
对于v-for列表渲染指令，项目中很常用的额，但是我们一般可能在从后端接口拿到数据的时候就把数据通过循环整理改造成自己想要的样子了。有时候可能对于不同的列表需求，还要在data里多造一份数据。
这种做法是非常累赘的。最好的方式是在v-for循环的时候对数据进行操作，从而可以做到维护源数据不变。
第一种：计算属性过滤
平时可能容易被忽视，在项目中用到的地方可能不是很多，或者常常直接就先整理再v-for了。
<body>
<div id="app">
<li v-for="n in evenNum" :key="n">
{{n}}
</li>
</div>
</body>
</html>
<script type="text/javascript">
let vm = new Vue({
el:'#app',
data:{
num:[1,2,3,4,5]
},
computed:{
evenNum(){
return this.num.filter(item=>item%2==0)
}
},
methods:{ }
})
</script>
第二种：采用method，如果是嵌套v-for的话，计算属性不适用。
<body>
<div id="app">
<div v-for="(item,index) in num" :key="index" style="border:1px solid red;margin-bottom: 20px;">
<li v-for="n in filt(item)" :key="n">
{{n}}
</li>
</div>
</div>
</body>
</html>
<script type="text/javascript">
let vm = new Vue({
el:'#app',
data:{
num:[[1,2,3,4],[5,6,7,8],[9,10,11,12]]
},
computed:{ },
methods:{
filt(item){
if(Math.max(...item)==8){
return item.filter(item=>item%2==0)
}else{
return item
} }
}
})
</script>
总结：v-for的以上两个方法比较容易受忽视，其实它是非常强大实用的。能处理较为复杂的业务场景。
提示：v-for的优先级是大于v-if的，展开数据后再判断渲染与否。
v-for的显示过滤/排序结果的更多相关文章
- ch7-列表渲染(v-for key 数组更新检测 显示过滤/排序结果)
1 说明 我们用 v-for 指令根据一组数组的选项列表进行渲染. v-for 指令需要以 item in items 形式的特殊语法, items 是源数据数组并且 item 是数组元素迭代的别名. ...
- Vue数组更新及过滤排序
前面的话 Vue为了增加列表渲染的功能,增加了一组观察数组的方法,而且可以显示一个数组的过滤或排序的副本.本文将详细介绍Vue数组更新及过滤排序 变异方法 Vue 包含一组观察数组的变异方法,它们将会 ...
- AngularJS过滤排序思路
本篇主要整理使用AngularJS进行过滤排序的思路. 在controller中,$scope的persons字段存储数组. $scope.persons = [ { "name" ...
- DRF 过滤排序分页异常处理
DRF 中如何使用过滤,排序,分页,以及报错了如何处理?10分钟get了~
- [LeetCode] Text Justification words显示的排序控制
Given an array of words and a length L, format the text such that each line has exactly L characters ...
- 三 drf 认证,权限,限流,过滤,排序,分页,异常处理,接口文档,集xadmin的使用
因为接下来的功能中需要使用到登陆功能,所以我们使用django内置admin站点并创建一个管理员. python manage.py createsuperuser 创建管理员以后,访问admin站点 ...
- drf07 过滤 排序 分页 异常处理 自动生成接口文档
4. 过滤Filtering 对于列表数据可能需要根据字段进行过滤,我们可以通过添加django-fitlter扩展来增强支持. pip install django-filter 在配置文件sett ...
- day74:drf:drf其他功能:认证/权限/限流/过滤/排序/分页/异常处理&自动生成接口文档
目录 1.django-admin 2.认证:Authentication 3.权限:Permissions 4.限流:Throttling 5.过滤:Filtering 6.排序:OrderingF ...
- DRF之过滤排序分页异常处理
一.过滤 对于列表数据要通过字段来进行过滤,就需要添加 django-filter 模块 使用方法: # 1.注册,在app中注册 settings.py INSTALLED_APPS = [ 'dj ...
随机推荐
- Java基础01-JVM内存分析
JVM java虚拟机 java编译后的class文件就是在java虚拟机上运行的 1.栈区(stacksegment)存放函数的参数值,局部变量的值等,在超过这个变量的作用域时就会被系统自动释放掉存 ...
- 牛客网Java刷题知识点之父类中的私有内容，子类是否具备？ 子类不可直接，但可间接访问父类中的私有内容？
不多说,直接上干货! 父类中的私有内容,子类是否具备? 答:不具备 子类不可直接,但可间接访问父类中的私有内容 这样情况,开发中不所见,但是,面试的时候,必考非常常见.
- Qt 学习（3）
Qt 修改 Windows 注册表项 在使用 FT232R 驱动(usb转串口设备)连接电脑时,下位机发送的数据会被转换器缓存起来,由串口转换器驱动设定的延时定时发送到 PC,这样就造成了一个问题:上 ...
- HDU 4635 —— Strongly connected——————【 强连通、最多加多少边仍不强连通】
Strongly connected Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u ...
- Java Executors小结
一 Executors提供了一系列工厂方法用于创先线程池ThreadPoolExecutor线程池的具体实现类,一般用的各种线程池都是基于这个类实现的 返回的线程池都实现了ExecutorServic ...
- 硬盘的基础知识-SSD
硬盘有三类:HDD(机械硬盘),SSD(固态硬盘),HHD(混合硬盘) 原理: HDD:磁性碟片 SSD: 闪存颗粒 HHD:磁性碟片的基础上加上了闪存颗粒. 这里对HDD,HHD不加说明,只对SSD ...
- centos系统安装mysql
方式一. 通过yum install mysql-server安装mysql服务器.chkconfig mysqld on设置开机启动,并service mysqld start启动mysql服务,并 ...
- hibernate课程 初探一对多映射2-4 Mysql创建数据库表
1 本节内容: mysql 数据库建表(班级表和学生表) Create table grade(gid varchar(32) primary key, gname varchar(32) not n ...
- 《Head First 设计模式》之代理模式
代理模式(Proxy):控制对象访问 ——为另一个对象提供一个替身或占位符来访问这个对象. 要点: 代理模式有许多变体,如:缓存代理.同步代理.防火墙代理和写入时复制代理 代理在结构上类似装饰者,但目 ...
- python基础:冒泡和选择排序算法实现
冒泡排序和选择排序 首先引用一下百度百科对于冒泡算法的定义: 冒泡排序算法的原理如下: 比较相邻的元素.如果第一个比第二个大,就交换他们两个. 对每一对相邻元素做同样的工作,从开始第一对到结尾 ...