查看“Vue从入门到实战:v-for和v-if一起使用的替代方案”的源代码
←
Vue从入门到实战:v-for和v-if一起使用的替代方案
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
将v-for和v-if一起使用,在渲染列表时,根据v-if指令的条件判断来过滤列表中不满足条件的列表项。 [http://106.15.191.50/mediawiki/index.php/Vue%E4%BB%8E%E5%85%A5%E9%97%A8%E5%88%B0%E5%AE%9E%E6%88%98%EF%BC%9A%E5%86%85%E7%BD%AE%E6%8C%87%E4%BB%A4#v-for.E4.B8.8Ev-if.E4.B8.80.E5.90.8C.E4.BD.BF.E7.94.A8 v-for和v-if一起使用] 实际上,这个功能也可以使用计算属性来完成。 <nowiki> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>v-for与计算属性</title> </head> <body> <div id="app"> <h1>已完成的工作计划</h1> <ul> <li v-for="plan in completedPlans"> {{plan.content}} </li> </ul> <h1>未完成的工作计划</h1> <ul> <li v-for="plan in incompletePlans"> {{plan.content}} </li> </ul> </div> <script src="vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { plans: [ {content: '写《Vue.js无难事》', isComplete: false}, {content: '买菜', isComplete: true}, {content: '写PPT', isComplete: false}, {content: '做饭', isComplete: true}, {content: '打羽毛球', isComplete: false} ] }, computed: { // 计算属性的 getter completedPlans: function () { return this.plans.filter(plan => plan.isComplete); }, incompletePlans: function(){ return this.plans.filter(plan => !plan.isComplete); } } }) </script> </body> </html></nowiki> Vue.js的作者不建议把v-for和v-if同时用在同一个元素上。 采用计算属性过滤后再遍历,可以获得如下好处: *过滤后的列表只会在plan数组发生相关变化时才被重新计算, *使用v-for="plan in completedPlans"之后,在渲染的时候只遍历已完成的计划,渲染更高效 *解耦渲染层的逻辑,可维护性更强。
返回至
Vue从入门到实战:v-for和v-if一起使用的替代方案
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息