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 ...
随机推荐
- empty,isset,is_null比较（差异与异同）
做php开发时候,想必在使用:empty,isset,is_null 这几个函数时候,遇到一些问题.甚至给自己的程序带来一些安全隐患的bug.很多时候,对于isset,empty都认为差不多.因此开 ...
- dapper.net框架使用随笔
一.简单介绍 Dapper是轻量级的ORM工具,代码就SqlMapper.cs一个文件,对于习惯使用原生的sql语句用户是个好选择,具有以下特性. 1.类似 ado.net 的写法,灵活拼接sql 2 ...
- 构建web应用
一.web服务器示例 var http = require('http'); http.createServer(function(req, res){ res.writeHeader(200, {C ...
- （生产）vue-router：路由
参考:https://router.vuejs.org/zh-cn/ 安装 直接下载 / CDN https://unpkg.com/vue-router/dist/vue-router.js 使用: ...
- css3 走马灯效果
纯css3实现了一个正六边形的走马灯效果,记录一下css3动画的学习情况,效果如下: 主要用到的css3技术有:keyframes.perspective.perspective-origin.tra ...
- Android实现异步的几种方法
在Android项目中,有经验的开发人员都知道,一些耗时的IO操作等都必须在子线程中去操作,那么可以有哪些方法来开启子线程呢,一般可以使用Java中自带的几种方法,也可以使用Andorid特有的一些类 ...
- 夜色的 cocos2d-x 开发笔记 02
本章我们让飞机发射子弹,因此我们要写这样一个方法 子弹资源:欢迎下载 很详细的注释吧,现在有几个地方报错,.h文件里面一定要先声明 这里是本章所有的新方法,你可以一次声明全部,嗯,还有个报错应该是我们 ...
- Linux命令之创建文件夹3
1)mkdir fyr即可在当前目录下创建一个文件夹 2)在fyr文件夹下创建一个子目录 mkdir fyr/fyr1 注意:如果不存在父层目录直接创建对应父层目录下的子目录mkdir FYR/f ...
- 微软提供的 Web 版 Raspberry Pi 模拟器
https://docs.microsoft.com/en-gb/azure/iot-hub/iot-hub-raspberry-pi-web-simulator-get-started#overvi ...
- 获取文件绝对路径：__FILE__与$_SERVER[SCRIPT_FILENAME'']的区别
1.获取路径 (1)__FILE__ 获取某文件在本地目录中的绝对路径,(也就是说,哪个文件执行这行代码,它就获取哪个文件的绝对路径) (2)$__SERVER['SCRIPT_FILENAME'] ...