v-for和v-if不应该一起使用,必要情况下应该替换成computed属性。原因:v-for比v-if优先,如果每一次都需要遍历整个数组,将会影响速度,尤其是当之需要渲染很小一部分的时候。

 
错误写法
<li
v-for="user in users"
v-if="user.isActive"
:key="user.id"
>
{{ user.name }}
</li>
如上情况,即使100个user中之需要使用一个数据,也会循环整个数组。
 
正确写法

computed: {
activeUsers: function () {
return this.users.filter(function (user) {
return user.isActive
})
}
}
<ul>
<li
v-for="user in activeUsers"
:key="user.id"
>
{{ user.name }}
</li>
</ul>

喜欢的小伙伴可以关注我的微信公众号“前端伪大叔”

vue中v-if和v-for优先级的更多相关文章

  1. Oracle 中的一些重要V$ 动态性能视图,系统视图和表

    v$database:数据库的信息,如数据库名,创建时间等. v$instance 实例信息,如实例名,启动时间. v$parameter 参数信息,select * from v$parameter ...

  2. 如何对多个文件进行MODELSIM仿真? (由于是一个很大的项目,不可能把所有MODULE都放在一个文件里。 如何在ModelSim中对多个.V文件进行仿真?)

    可以将所有要编译的所有文件的名字做一个list.新建一个文本文档,重命名为vflist vflist内容例子如下(src为文件夹):src/base_addr_chk.vsrc/config_mux. ...

  3. 【转】 Oracle 中的一些重要V$ 动态性能视图,系统视图和表

    v$database:数据库的信息,如数据库名,创建时间等. v$instance 实例信息,如实例名,启动时间. v$parameter 参数信息,select * from v$parameter ...

  4. vue中的vue-cli

    在前面的学习过程中我相信你们已经对vue有了一定的了解,现在我们来看一下vue中的vue-cli. 学习这个我们首先需要的是node环境的,如果你的网络环境慢的话建议安装淘宝镜像,在cmd中输入 np ...

  5. Vue学习笔记七:Vue中的样式

    目录 两种样式 class样式 内联样式 两种样式 Vue中使用样式方式有两种,一种是class样式,一种是内联样式也就是style class样式 class样式使用的方式有5种,HTML如下 &l ...

  6. vue 中 直接操作 cookie 及 如何使用工具 js-cookie

    转载:https://www.cnblogs.com/xiangsj/p/9030648.html vue 中直接操作 cookie 以下3种操作方式 set: function (name, val ...

  7. 纯小白入手 vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定

    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...

  8. vue中动态添加div

    知识点:vue中动态添加div节点,点击添加,动态生成div,点击删除,删除对应的div,其中数组的长度是动态改变的,如在from表单中应用,直接在提交方法中,获得list,获取所填的元素即可 效果: ...

  9. 042——VUE中组件之子组件使用$on与$emit事件触发父组件实现购物车功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. vue中$watch源码阅读笔记

    项目中使用了vue,一直在比较computed和$watch的使用场景,今天周末抽时间看了下vue中$watch的源码部分,也查阅了一些别人的文章,暂时把自己的笔记记录于此,供以后查阅: 实现一个简单 ...

随机推荐

  1. koa 基础(十五)cookie 设置中文

    1.app.js // 引入模块 const Koa = require('koa'); const router = require('koa-router')(); /*引入是实例化路由 推荐*/ ...

  2. 执行docker run命令时报错Get https://registry-1.docker.io/v2/: net/http: request canceled while waiting for connection (Client.Timeout exceeded while awaiting headers)

    一.解决办法: 修改host 二.步骤如下 2.1 安装dig工具  sudo apt-get install dnsutils -y (ubuntu下的安装方法) 2.2 找到registry-1. ...

  3. MVC和MVP区别

    从这幅图可以看到,我们可以看到在MVC里,View是可以直接访问Model的!从而,View里会包含Model信息,不可避免的还要包括一些业务逻辑. 在MVC模型里,更关注的Model的不变,而同时有 ...

  4. 在发布ASP.NET网站的时候,出现state server错误

    错误信息如下: 在发布ASP.NET网站的时候,出现state server错误: Server Error in '/' Application. ------------------------- ...

  5. WCF绑定(Binding)

    一个Binding由一个有序的binding元素栈所组成,其中的每一个元素都指定了连接到ServiceEndpoint的一个方面.在这个栈中的最底两层都是必须要有的.最底下的一层是传输binding元 ...

  6. 自由度为n的卡方分布χ²(n)的期望等于n、方差等于2n的证明

    出自:http://blog.sina.com.cn/s/blog_4cb6ee6c0102xh17.html

  7. spring boot系列(四)spring boot 配置spring data jpa (保存修改删除方法)

    spring boot 使用jpa在pom.xml在上文中已经介绍过.在这里直接介绍各个类文件如何编写: 代码结构: domain(存放实体类文件): repository(存放数据库操作文件,相当于 ...

  8. Delphi让控件随着窗口的大小而改变

    Delphi让控件随着窗口的大小而改变方法1:设置Anchors属性,把akLeft,akTop,akRight,akBottom都设为True.方法2:设置Align属性,其值为alClient.

  9. YII :将oracle中timestamp 字段正常显示在页面中

    'value'=>'DateTime::createFromFormat("d#M#y H#i#s*A", $data["START_TIME"])-&g ...

  10. js Date格式转化

    Date格式转化为日期  年-月-日(格式随意修改) GetDateStr(dd, AddDayCount) { dd.setDate(dd.getDate() + AddDayCount)// 获取 ...