摘抄自:https://www.cnblogs.com/showjs/p/11376446.html

在开发时候碰到了一个问题:v-if和v-for不能同时使用:

<h-tab-pane
v-for="(item, index) in tabItems"
:key="index"
:label="item.title"
:id="item.id"
:name="item.id"
v-if="item.show"
>
<comment :is="item.componentName"></comment>
</h-tab-pane>

查找资料,官方的例子如下:(风格指南:https://cn.vuejs.org/v2/style-guide/

<ul>
<li
v-for="user in users"
v-if="user.isActive"
:key="user.id"
>
{{ user.name }}
</li>
</ul>

原因:当 Vue 处理指令时,v-for 比 v-if 具有更高的优先级,所以上述模板会进行如下运算:

this.users.map(function (user) {
if (user.isActive) {
return user.name
}
})

  因此哪怕我们只渲染出一小部分用户的元素,也得在每次重渲染的时候遍历整个列表,不论活跃用户是否发生了变化。

  通过将其更换为在如下的一个计算属性上遍历:

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>

  在找资料过程中,发现了另一种方法,实测可用:https://forum.vuejs.org/t/vue3-x-v-for-v-if-v-if-v-else/71414/3

 <template v-for="(item, index) in tabItems">
<h-tab-pane
v-if="item.show"
:key="index"
:label="item.title"
:id="item.id"
:name="item.id"
>
<comment :is="item.componentName"></comment>
</h-tab-pane>
</template>

VUE中v-for和v-if不能同时使用的问题的更多相关文章

  1. vue中v-if和v-for指令最好不要同时使用

    建议不要在与v-for相同的元素上使用v-if.因为v-for指令的优先级高于v-if当它们处于同一节点.v-for 的优先级比 v-if 更高,这意味着 v-if 将分别重复运行于每个 v-for  ...

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

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

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

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

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

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

  5. vue中的vue-cli

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

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

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

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

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

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

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

  9. vue中动态添加div

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

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

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

随机推荐

  1. Python&Selenium&Unittest&BeautifuReport 自动化测试并生成HTML自动化测试报告

    一.摘要 本篇博文将介绍如何借助BeautifulReport和HTML模版,生成HTML测试报告的BeautifulReport 源码Clone地址为 https://github.com/Test ...

  2. 【线段树 dp】8.6集合

    线段树维护dp 题目大意 给定初始大小为 $N$ 的正整数集合.定义两个数$x$和$y$建立联系的的代价为 $|x-y|$.我们定义整数集合的代价为:将每个整数都与至少一个另外的整数建立联系之后,所有 ...

  3. onpageshow、onpagehide、onload、onunload

    onpageshow :在用户浏览网页时触发, 在页面从浏览器缓存中读取时也触发 通过event.persisted 来判断, 如果页面从浏览器的缓存中读取该属性返回 ture,否则返回 false ...

  4. cubemx+stm32串口学习汇总资料

    这篇文章是串口中断的文章--STM32基于CubeMX的高速串口收发程序(中断模式)比较有帮助. http://www.stmcu.org.cn/module/forum/thread-616613- ...

  5. OFDM时域削峰法降峰均比的原理及影响

    以下是对实验室师兄答疑的转述,经加工后的文字不可避免的存在一些噪声,仅供参考: 时域削峰为非线性变换,效果上相当于将时域中功率较大值的信号点,减去一个合适的“抵消”信号点的功率,使其降低到所设置的门限 ...

  6. python中模块、包、库的区别和使用

    模块:就是.py文件,里面定义了一些函数和变量,需要的时候就可以导入这些模块. 包:在模块之上的概念,为了方便管理而将文件进行打包.包目录下第一个文件便是 __init__.py,然后是一些模块文件和 ...

  7. Vue 事件监听实现导航栏吸顶效果(页面滚动后定位)

    Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...

  8. UVAlive 7414 Squeeze the Cylinders a,b,c三种步数 搜索+最短路

    题意:给你n个点(n<=50),然后有些点之间会有一条路,路是单向的,每个回合让你走a,b,c三种步数中的任意一种(a,b,c<=100),问你最少需要多少个回合才能保证一定能从1点到达n ...

  9. Python图形用户界面-Tkinter

    Tkinter是什么 python 特定的GUI界面,是一个图像的窗口,tkinter是python 自带的,可以编辑的GUI界面,我们可以用GUI 实现很多一个直观的功能,如何想开发一个计算器,如果 ...

  10. Manacher 算法学习小记

    概要 一个字符串有多少个回文的字串?最多有 \(O(n^2)\) 级别个.但 Manacher 算法却可以用 \(O(n)\) 的时间复杂度解决这个问题.同时 Manacher 算法实现非常简单. 一 ...