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 ...
随机推荐
- Unity string 转换为 Quaternion
public Quaternion QuaternionParse(string name) { name = name.Replace("(", "").Re ...
- Murano Weekly Meeting 2016.07.05
Meeting time: 2016.July.05 1:00~2:00 Chairperson: Kirill Zaitsev, from Mirantis Meeting summary: 1. ...
- Object.create 以及 Object.setPrototypeOf
第一部分 Object.crate() 方法是es5中的关于原型的方法, 这个方法会使用指定的原型对象以及属性去创建一个新的对象. 语法 Object.create(proto, [ properti ...
- LeetCode 860.柠檬水找零（C++）
在柠檬水摊上,每一杯柠檬水的售价为 5 美元. 顾客排队购买你的产品,(按账单 bills 支付的顺序)一次购买一杯. 每位顾客只买一杯柠檬水,然后向你付 5 美元.10 美元或 20 美元.你必须给 ...
- 换晶振导致stm32串口数据飞码的解决办法
一般来说,stm32f107都是用标配的晶振,比如8MHz. 但是,如果用别的晶振,比如13.56M的晶振,那串口接收还正常吗? 根据试验结果,很可能会飞码.比如说用串口助手发送的是0x35,但是在串 ...
- HDU 5532——Almost Sorted Array——————【技巧】
Almost Sorted Array Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 262144/262144 K (Java/Ot ...
- AngularJS directive 动态 template
app.directive('testwindow', function() { return { restrict : 'E', template: '<ng-include src=&quo ...
- WCF、WebAPI、WCFREST、WebService 、RPC、HTTP 概念解释
在.net平台下,有大量的技术让你创建一个HTTP服务,像Web Service,WCF,现在又出了Web API.在.net平台下,你有很多的选择来构建一个HTTP Services.我分享一下我对 ...
- 浅谈MVC基础
ASP.NET MVC :UI层框架 让我们的web开发又回到了本质:请求,处理,响应 MVC本身是一种思想,将程序分成三个模块 Model:模型 广义的说法(包含DAL BLL MODEL ...
- Oracle Functions转成Ms-Sql procedure
最近公司的一些Oracle项目要转到Ms_sql上,在把Oracle Functions改成MS-Sql的Procedure时,遇到了翻译的问题. 罗列出这些问题: 一.Oracle 基本类型 ora ...