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 ...
随机推荐
- ssh RSA key变化后处理
root@localhost:/# scp -r root@172.19.47.30:/home/linux-4.16.2-devm.1.2.aarch64.dongbo ./@@@@@@@@@@@@ ...
- [转]jquery的ajax交付时“加载中”提示的处理方法
本文转自:http://www.educity.cn/wenda/77121.html jquery的ajax提交时“加载中”提示的处理方法 方法1:使用ajaxStart方法定义一个全局的“加 ...
- 使用require.js
requirejs使用入门 什么是requirejs? RequireJS的目标是鼓励代码的模块化,它使用了不同于传统<script>标签的脚本加载步骤.可以用它来加速.优化代码,但其主要 ...
- 数据结构之C语言模拟整数数组实现
#include <stdio.h> #include <malloc.h> #include <stdlib.h> typedef struct Arr { in ...
- HDU 1045——Fire Net——————【最大匹配、构图、邻接矩阵做法】
Fire Net Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Submit Sta ...
- BNU 26349——Cards——————【区间dp】
题目大意:给你n张牌,排成一排放在桌子上,可以从左端拿也可以从右端拿.现在有A,B两人轮流取牌,A先取,两人足够聪明,即都想取最大的牌总和,问A能取到的最大值. 解题思路:定义dp[i][j][k]. ...
- Ubuntu上的相关问题
一.解决Ubuntu中vi命令的编辑模式下不能正常使用方向键和退格键的问题 在Ubuntu中,进入vi命令的编辑模式,发现按方向键不能移动光标,而是会输出ABCD,以及退格键也不能正常删除字符.这是由 ...
- [转]png图片压缩大小但是不改变透明部分
降低PNG图片存储大小方法,图片压缩方法,如何降低PNG图片存储大小?前提是分辨率和尺寸大小不变,图形的透明部分不变.请看如下办法,亲测可用. 1. 将PNG图片用PS打开. 2. 图像-模式-8位/ ...
- IIS下发布关于Excel导入导出时遇到的问题集锦(转)
问题描述 1.Excel每个工作薄(sheet)生成记录行数 2.asp.net关于导出Excel的一些问题的集锦 3.下载失败,临时文件或其所在磁盘不可写 4.未能加载文件或程序集“Microsof ...
- output引用类型
1.创建存储过程,将参数avg设置为引用参数,可以对参数有反馈作用 ), @avg float output) as select @avg=AVG(price) from goods where g ...