013v-if和v-for不能同时使用原因.md · shixiaoyu/biji - Gitee.com

加入 Gitee

与超过 1200万开发者一起发现、参与优秀开源项目，私有仓库也完全免费：）

文件

该仓库未声明开源许可证文件（LICENSE），使用请关注具体项目描述及其代码上游依赖。

克隆/下载

013v-if和v-for不能同时使用原因.md 1.25 KB

一键复制编辑原始数据按行查看历史

提交于 2021-05-14 19:59 . Promise其他地方使用,权限管理初步版本

### v-if 和 v-for 不建议同时使用:

作用,优先级,注意事项

###### 同时使用情况:(每次渲染都会向渲染在进行条件判断)

1.为了过滤一个列表中的项目

2.为了避免渲染本该隐藏的列表

###### 情况一:

```js
先遍历,在看内容是否符合规范
<ul>
    <li v-for="item in obj" v-if="item.age>20">{{item.name}}</li> //循环obj,如果obj中的age>20 就显示>20的列表
</ul>
//以上得到以下方式
obj.map((item)=>{
    if(item.age > 20){
        return item.name
    }
})
//虽然只渲染一部分,但每次重新渲染的时候都会遍历整个列表,无论年龄时候满足条件
```

###### 解决办法:

使用计算属性,计算属性中处理过滤,会在完毕后缓存内容,提高遍历效率(有个缓存,不必每次都遍历只遍历一次然后刷选条件)

###### 情况二:

```js
想看是否显示,再遍历显示内容
<li v-for="item in obj" v-if="isShow"></li>
```

需求:有事想要显示一个数组的过滤或者排序,不改变或充值原始数据,使用计算属性过滤数据

结果:1 过滤后的列表只会在数组发生变化的时候才会重新被运算 过滤更高效 2 使用v-for之后,渲染后过滤数据,渲染更高效 3 解耦渲染层的逻辑,可维护行更强

马建仓 AI 助手

尝试更多

代码解读

代码找茬

代码优化

1

https://gitee.com/shi-xiao-yu/biji.git

git@gitee.com:shi-xiao-yu/biji.git

shi-xiao-yu

biji

biji

master