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 ...
随机推荐
- malloc(0)分配多少内存？（译文）
原文地址:http://prog21.dadgum.com/179.html 在大多的系统中,这个C的小程序将会吸收全部空闲的内存. ){ ); } 在我们聊malloc(0)之前,让我们看看mall ...
- Kudu的性能测试
不多说,直接上干货! Kudu的性能测试 1. kudu和parquet的比较 上图是官方给出的用Impala跑TPC-H的测试,对比Parquet和Kudu的计算速度.从图中我们可以发现,Ku ...
- redis数据类型及常用命令使用
redis干啥的,一般人都知道,但很多人只知道是个缓存数据库,其它的就不知道了,本猿无能亦是如此,然知耻而后勇,我们该理一理这里边的一些逻辑,看看redis究竟是怎么一回事儿,能干啥,怎么做的,这样才 ...
- pat04-树7. Search in a Binary Search Tree (25)
04-树7. Search in a Binary Search Tree (25) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 ...
- Objective-C #define 用法解析 （转）
原文地址: http://blog.csdn.net/kindazrael/article/details/8108868 Objective-C : #define 用法解析 在 C 语言中,预处理 ...
- jQuery的表单验证
jQuery的表单验证 直接上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- jQuery设置全选和全反选
HTML 代码: <input type="checkbox" id="allChecked" onclick="setAllChecked(t ...
- log4j.dtd
<?xml version="1.0" encoding="UTF-8" ?> <!-- Licensed to the Apache Sof ...
- Select2实现的带搜索的省市区三级联动代码 设置默认初始值
$(function() { $('#loc_province').select2('val','2456'); $('#loc_province').change(); $('#loc_city') ...
- css取消a标签在移动端点击时的背景颜色
一.取消a标签在移动端点击时的蓝色 -webkit-tap-highlight-color: rgba(255, 255, 255, 0);-webkit-user-select: none;-moz ...