当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级,这意味着 v-if 将分别重复运行于每个 v-for 循环中

所以,不推荐v-if和v-for同时使用

使用推荐方式:

<div v-if="proxyconfig.ip instanceof Object ">
<el-tag :type="proxyconfig.status_color" v-for="ip in proxyconfig.ip.split('\n')" >
{{ip}} {{proxyconfig.status_text[ip]}}
</el-tag>
</div>
<div v-else>
<el-tag :type="proxyconfig.status_color" v-for="ip in proxyconfig.ip.split('\n')">
{{ip}} {{proxyconfig.status_text}}
</el-tag>
</div>

或者:放在计算属性遍历

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>

当它们处于同一节点,v-for 的优先级比 v-if 更高,这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你想为仅有的一些项渲染节点时,这种优先级的机制会十分有用,如下:

<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo }}
</li>

上面的代码只传递了未完成的 todos。

而如果你的目的是有条件地跳过循环的执行,那么可以将 v-if 置于外层元素 (或 <template>)上。如:

<ul v-if="todos.length">
<li v-for="todo in todos">
{{ todo }}
</li>
</ul>
<p v-else>No todos left!</p>

vue的使用规范之v-if 与 v-for 一起使用的更多相关文章

  1. 团队开发前端VUE项目代码规范

    团队开发前端VUE项目代码规范 2018年09月22日 20:18:11 我的小英短 阅读数 1658   一.规范目的: 统一编码风格,命名规范,注释要求,在团队协作中输出可读性强,易维护,风格一致 ...

  2. Oracle基本数据字典:v$database、v$instance、v$version、dba_objects

    v$database: 视图结构: SQL> desc v$database; Name                                      Null?    Type - ...

  3. POJ2762 Going from u to v or from v to u(单连通 缩点)

    判断图是否单连通,先用强连通分图处理,再拓扑排序,需注意: 符合要求的不一定是链拓扑排序列结果唯一,即在队列中的元素始终只有一个 #include<cstdio> #include< ...

  4. Going from u to v or from v to u?_POJ2762强连通+并查集缩点+拓扑排序

         Going from u to v or from v to u? Time Limit: 2000MS   Memory Limit: 65536K       Description I ...

  5. 临时文件相关的v$tempfile v$sort_usage与V$tempseg_usage

    SQL> select username,user,segtype,segfile#,segblk#,extents,segrfno# from v$sort_usage; SEGFILE#代表 ...

  6. [强连通分量] POJ 2762 Going from u to v or from v to u?

    Going from u to v or from v to u? Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 17089 ...

  7. POJ2762 Going from u to v or from v to u?(判定单连通图:强连通分量+缩点+拓扑排序)

    这道题要判断一张有向图是否是单连通图,即图中是否任意两点u和v都存在u到v或v到u的路径. 方法是,找出图中所有强连通分量,强连通分量上的点肯定也是满足单连通性的,然后对强连通分量进行缩点,缩点后就变 ...

  8. poj 2762 Going from u to v or from v to u?

    题目描述:为了让他们的儿子变得更勇敢些,Jiajia和Wind将他们带到一个大洞穴中.洞穴中有n个房间,有一些单向的通道连接某些房间.每次,Wind选择两个房间x和y,要求他们的一个儿子从一个房间走到 ...

  9. POJ 2762 Going from u to v or from v to u? (强连通分量缩点+拓扑排序)

    题目链接:http://poj.org/problem?id=2762 题意是 有t组样例,n个点m条有向边,取任意两个点u和v,问u能不能到v 或者v能不能到u,要是可以就输出Yes,否则输出No. ...

  10. poj 2762 Going from u to v or from v to u?(强连通分量+缩点重构图+拓扑排序)

    http://poj.org/problem?id=2762 Going from u to v or from v to u? Time Limit: 2000MS   Memory Limit:  ...

随机推荐

  1. Python Ethical Hacking - TROJANS Analysis(3)

    BYPASSING ANTI-VIRUS PROGRAMS AV programs detect viruses based on: 1. Code - compare files to huge d ...

  2. p72_电子邮件

    一.电子邮件格式 信封 abcd@xx.com 内容 2.1 首部(To, Subject)-> (From,To,Subject,Date) 2.2 主体 二.电子邮件组成结构 三.SMTP ...

  3. Saas Erp以及分销 助手

    首先贴一下相关的截图 SaasErp 登陆页 Saas Erp主页 Saas Erp 其中的商品页 Saas Erp  打印模板设计页 分销助手登录页/手势密码页/主页 1.SaaS是Software ...

  4. windows上Scrapy 框架的安装

    采用在命令行直接安装的方式:pip install scrapy报错:   到这个网站下载 Twisted:https://www.lfd.uci.edu/~gohlke/pythonlibs/进入网 ...

  5. python 简单粗暴的生产的验证码

    import os import pygame import random from pygame.locals import * count = 0; 生成验证码的函姝 def get_code() ...

  6. 无法定位序数242于动态链接库,Anaconda3\Library\bin\mkl_intel_thread

    python.exe-找不到序数:无法定位序数242与动态链接库libiomp5md.dll上.或无法定位程序输入点 mkl_dft_create_descriptor_md于动态链接库 Ancond ...

  7. APP自动化 -- MobileBy

    一.BobileBy源码 selenium中有 By appium就有MobileBy. 二.MobileBy示例 MobileBy就是继承的By,所以,语法基本是一样的.

  8. SAS X option

    1. SAS X选项就是调用DOS命令. 例子: option noxwait;/*黑窗口执行完命令后自动关闭*/ %let path =.; %let filter=*.lst; X “ dir & ...

  9. Pycharm远程解释器SFTP开发和调试

    转载:https://blog.csdn.net/ll641058431/article/details/53049453 使用PyCharm进行远程开发和调试 你是否经常要在Windows 7或MA ...

  10. Java的常用类——Object类、String类

    Java的JDK中提供给我们很多封装好的类就是Java API,可以直接调用. Java 的API(API: Application(应用) Programming(程序) Interface(接口) ...