v-if和v-for连用出现的问题

zhangfaliang 发布于2019-08-26 13:29 / 1884人阅读

摘要：解决方案有两个可以根据具体情况而定当控制的元素不存在中可以使用包裹住对应的也可以使用父级元素添加可以不加载从而优化性能添加一个添加到父级如果控制的元素存在中可以通过使用计算器属性来回避比如使用计算器属性在页面加载之前进行

解决方案有两个可以根据具体情况而定

1.当控制v-if的元素不存在v-for中 , 可以使用template包裹住对应的v-for , 也可以使用父级元素添加v-if , 可以不加载从而优化性能

添加一个template

添加到父级


   {{item.value}}

2.如果v-if 控制的元素存在v-for中 , 可以通过使用计算器属性来回避 , 比如使用计算器属性在页面加载之前进行一边过滤

computed: {
    loadList() {
       const { list } = this
       return list.filter(item => item.value)
    }
}


问题的实质是因为在vue中会优先执行v-for, 当v-for把所有内容全部遍历之后 , v-if再对已经遍历的元素进行删除 , 造成了加载的浪费 , 所以应该在执行v-for之前优先执行v-if , 可以减少加载的压力

GPU云服务器云服务器 cdn的出现问题云主机可能出现的问题阿里云服务器容易出现的问题 extjs出现问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108903.html

Vue 的条件渲染和列表渲染

摘要：条件渲染上一篇与绑定下一篇的事件处理方法在中配合渲染一整组在使用控制元素的时候，我们需要将它添加到这个元素上去。最终的渲染结果不会包含元素。渲染如下列表渲染使用把一个数组对应为一组元素我们用指令根据一组数组的选项列表进行渲染。条件渲染上一篇：Class 与 Style 绑定：https://segmentfault.com/a/11...下一篇：Vue的事件处理方法：https:/...

go4it 2019-08-20 19:06 评论0 收藏0
Vue官方推荐的风格指南

摘要：官方推荐的风格指南个人笔记最近刚注意到官方多了一个风格指南的推荐。中始终用组件命名因为官方推荐风格命名，所以能用就用组件命名单词应该是完整的单词完整单词带易读性的好处，和书写麻烦的缺点。 Vue官方推荐的风格指南-个人笔记最近刚注意到vue官方多了一个vue风格指南的推荐。因为业务中一直用的vue，所以梳理学习一下，来增加自己代码的规范性，效果不错也可以安利到团队。文档没有对JS...

null1145 2019-08-22 18:28 评论0 收藏0
前端面试--vue

摘要：注意重点是获取更新后的就是在开发过程中有个需求是需要在阶段操作数据更新后的节点这时候就需要用到就是用来知道什么时候更新完成原因在钩子函数执行的时候其实并未进行任何渲染，而此时进行操作无异于徒劳，所以在中一定要将操作的代码放进的回调函数中。 1. 最简单的vue el: dom节点 data: 数据 Vue 测试实例 - 菜鸟教程(runoob.com) ...

coordinate35 2019-08-26 13:45 评论0 收藏0
Vue.js Guide Essentials-说人话-速记版

摘要：以下内容根据部分速记。同时，需要在父组件标签中添加这个属性，该属性才能传递到子组件内。把父组件传递的数据当做子组件的初始值。以下内容根据Vue.js Guide Essentials部分速记。不含动画/mixin/SSR/路由/状态管理等部分. Introduction 建议阅读原文 https://vuejs.org/v2/guide/in... 什么是Vue 开始声明式...

Sanchi 2019-08-21 18:38 评论0 收藏0
如何利用vue进行条件渲染

摘要：在中配合条件渲染一整组因为是一个指令，需要将它添加到一个元素上。因此，如果需要非常频繁地切换，则使用较好如果在运行时条件不太可能改变，则使用较好。 vue的条件渲染 v-if v-if指令可以插入和删除所命令的模板 Yes data:{ ok:true } 输出HTML Yes 当我们更改 ok 为 false时我们会发现页面的 Yes 消失，在控制台里面会发现 h1 标签也已...

赵春朋 2019-08-20 19:05 评论0 收藏0