问题:Vue2.0中v-if和v-for一起使用时报错,怎么解决呢?

代码和报错信息如下

 原因和解决办法:

  在处于同一节点的时候,v-for 优先级比 v-if 高。这意味着 v-if 将分别重复运行于每个 v-for 循环中。先运行v-for 的循环,然后在每一个v-for 的循环中,再进行 v-if 的条件对比。所以不推荐v-if和v-for同时使用。

所以把v-if放在外层标签上面即可(上面的例子把v-if放在el-row上)

  • 在 vue 2.x 中,在一个元素上同时使用 v-if 和 v-for 时,v-for 会优先作用。
  • 在 vue 3.x 中,v-if 总是优先于 v-for 生效。

Vue中v-if和v-for一起使用时的优先级的更多相关文章

  1. (vue.js)vue中引用了别的组件 ,如何使this指向Vue对象

    Vue中引用了别的组件 ,如何使this指向Vue对象 今天学习Vue组件传值, 通过创建Vue实例, 广播和监听实现传值, 但是传值之后无法直接将得到的值应用到Vue对象, 因为这相当于引用改了别的 ...

  2. Java 中无返回值的方法在使用时应该注意的问题

    Java 中的方法是形态多样的.无返回值的方法在使用时应该规避哪些问题呢? 一.不可以打印调用或是赋值调用,只能是单独调用(非常重要): 二.返回值没有,不代表参数就没有: 三.不能return一个具 ...

  3. VC++中解决“在查找预编译头使用时跳过”的方法

    Visual C++ Concepts: Building a C/C++ ProgramCompiler Warning (level 1) C4627Error Message": sk ...

  4. java中 try catch finally和return联合使用时,代码执行顺序的小细节

    代码1测试 public static void main(String[] args) { aa(); } static int aa() { try { int a=4/0; } catch (E ...

  5. mybatis :xml文件中传入参数和if标签结合使用时要点

    org.mybatis.spring.MyBatisSystemException: nested exception is org.apache.ibatis.reflection.Reflecti ...

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

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

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

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

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

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

  9. vue中的vue-cli

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

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

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

随机推荐

  1. JZOJ 1967.【2011集训队出题】聪聪可可

    题目 [2011集训队出题]聪聪可可 思路 看看做做 阴阳 这道题 极力推荐 自从做了这道题后,这些题就变成秒切的题了 很容易想到求节点到分治中心的距离,然后 \(\bmod 3\) 那么在求根节点一 ...

  2. windows server backup 无法使用或wbadmin.msc致命错误解决方法

    因为黑群辉断电无法自动引导进系统,我也找不到很好的办法,所以决定使用windows server来做NAS服务器,虽然都解决了内网穿透的问题,但是数据安全还在找方案,目前已经解决: 1.购买了一张pc ...

  3. MRI炎症和结构损伤指标对TNF拮抗剂治疗AS患者获持续缓解的预测价值

    MRI炎症和结构损伤指标对TNF拮抗剂治疗AS患者获持续缓解的预测价值 EULAR2015; PresentID: OP0043 PREDICTORS OF SUSTAINED REMISSION O ...

  4. Canvas:绘制曲线

    前言 画曲线要用到二次贝塞尔曲线或三次贝塞尔曲线.贝塞尔曲线是计算机图形学中相当重要的参数曲线,在一些比较成熟的位图软件中也有贝塞尔曲线工具,如 PhotoShop. 二次贝塞尔曲线 二次贝塞尔曲线在 ...

  5. 解决MSsql 中文变成"?"的问题

    ALTER DATABASE IMStest SET SINGLE_USER WITH ROLLBACK IMMEDIATE; ALTER database IMStest collate Chine ...

  6. zint

    一.Zint1. 介绍 Zint是一个软件,允许在任何广泛的公共领域条形码标准中轻松编码数据,并允许将这种功能集成到您自己的程序中. Zint项目的目标是提供一个完全跨平台的开源条形码生成解决方案,目 ...

  7. 15.网关Gateway

    创建网关的Module 使用注册中心和配置中心 详细可以参考另两篇篇博客-注册中心和配置中心 报错 编译报了这个错,原因是我们没有给网关配置数据库连接字符串,但是引用了common,common中有m ...

  8. VUE学习-元素过渡

    单元素过渡 appear 初始渲染 通过 appear attribute 设置节点在初始渲染的过渡 appear + css <transition appear appear-class=& ...

  9. mysql错误号码2003 can't connect to mysql server on 'localhost' (0)解决方案

    找到mysql安装目录下的Bin目录,在cmd中进入这个目录,运行net start mysql 却显示服务名无效 所以此时 首先在MYSQL的安装目录bin下,输入mysqld --install ...

  10. Pycharm 2022.2激活码到2023年7月,亲测有效

    33MEHOB8W0-eyJsaWNlbnNlSWQiOiIzM01FSE9COFcwIiwibGljZW5zZWVOYW1lIjoiUG9saXRla25payBNZXJsaW1hdSBNZWxha ...