摘抄自: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. 如何正确清理C盘?

    Windows电脑操作系统一般是安装在磁盘驱动器的C盘中,一旦运行,便会产生许多垃圾文件,C盘空间在一定程度上都会越来越小.伴随着电脑工作的时间越久,C盘常常会提示显示其内存已不足.那么C盘容量不足对 ...

  2. 工具---《.264视频 转成 MP4视频》

    <.264视频 转成 MP4视频> 安装了“爱奇艺万能播放器”可以打开.264视频,但是opencv却不能直接读取.264视频,还是需要想办法“.264视频 转成 MP4/avi视频”. ...

  3. CF1037H Security——SAM+线段树合并

    又是一道\(SAM\)维护\(endpos\)集合的题,我直接把CF700E的板子粘过来了QwQ 思路 如果我们有\([l,r]\)对应的\(SAM\),只需要在上面贪心就可以了.因为要求的是字典序比 ...

  4. bzoj4009: [HNOI2015]接水果(整体二分)

    题目描述 风见幽香非常喜欢玩一个叫做 osu!的游戏,其中她最喜欢玩的模式就是接水果.由于她已经DT FC 了The big black, 她觉得这个游戏太简单了,于是发明了一个更加难的版本. 首先有 ...

  5. HDU 6061 - RXD and functions | 2017 Multi-University Training Contest 3

    每次NTT都忘记初始化,真的是写一个小时,Debug两个小时- - /* HDU 6061 - RXD and functions [ NTT ] | 2017 Multi-University Tr ...

  6. python中函数的参数传递小结

    “”“ 函数的参数 --必须参数,默认参数,组合参数 --函数我作为参数 --对象作为参数 --*args  可变参数 --**kwargs关键字参数 “”” def function1(a,b,*a ...

  7. PHP mysqli_more_results() 函数

    定义和用法 mysqli_more_results() 函数检查一个多查询是否有更多的结果. 语法 mysqli_more_results(connection); 参数 描述 connection ...

  8. PHP mysqli_free_result() 函数

    mysqli_free_result() 函数释放结果内存. <?php // 假定数据库用户名:root,密码:123456,数据库:RUNOOB $con=mysqli_connect(&q ...

  9. 部分易错JS知识点整理(缓慢填坑)

    主要还是各地搜刮来的,本人对于这方面的总结还是8彳亍,给各位大佬磕头了砰砰砰 1. 2.JS闭包和匿名对象以及作用域 js在执行之前,会将所有带var和function的进行提前定义和声明.(带var ...

  10. CKEditor从word粘贴问题

    最近公司做项目需要实现一个功能,在网页富文本编辑器中实现粘贴Word图文的功能. 我们在网站中使用的Web编辑器比较多,都是根据用户需求来选择的.目前还没有固定哪一个编辑器 有时候用的是UEditor ...