Vue中v-if和v-for一起使用时的优先级
问题: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一起使用时的优先级的更多相关文章
- (vue.js)vue中引用了别的组件 ,如何使this指向Vue对象
Vue中引用了别的组件 ,如何使this指向Vue对象 今天学习Vue组件传值, 通过创建Vue实例, 广播和监听实现传值, 但是传值之后无法直接将得到的值应用到Vue对象, 因为这相当于引用改了别的 ...
- Java 中无返回值的方法在使用时应该注意的问题
Java 中的方法是形态多样的.无返回值的方法在使用时应该规避哪些问题呢? 一.不可以打印调用或是赋值调用,只能是单独调用(非常重要): 二.返回值没有,不代表参数就没有: 三.不能return一个具 ...
- VC++中解决“在查找预编译头使用时跳过”的方法
Visual C++ Concepts: Building a C/C++ ProgramCompiler Warning (level 1) C4627Error Message": sk ...
- java中 try catch finally和return联合使用时,代码执行顺序的小细节
代码1测试 public static void main(String[] args) { aa(); } static int aa() { try { int a=4/0; } catch (E ...
- mybatis :xml文件中传入参数和if标签结合使用时要点
org.mybatis.spring.MyBatisSystemException: nested exception is org.apache.ibatis.reflection.Reflecti ...
- Oracle 中的一些重要V$ 动态性能视图,系统视图和表
v$database:数据库的信息,如数据库名,创建时间等. v$instance 实例信息,如实例名,启动时间. v$parameter 参数信息,select * from v$parameter ...
- 如何对多个文件进行MODELSIM仿真? (由于是一个很大的项目,不可能把所有MODULE都放在一个文件里。 如何在ModelSim中对多个.V文件进行仿真?)
可以将所有要编译的所有文件的名字做一个list.新建一个文本文档,重命名为vflist vflist内容例子如下(src为文件夹):src/base_addr_chk.vsrc/config_mux. ...
- 【转】 Oracle 中的一些重要V$ 动态性能视图,系统视图和表
v$database:数据库的信息,如数据库名,创建时间等. v$instance 实例信息,如实例名,启动时间. v$parameter 参数信息,select * from v$parameter ...
- vue中的vue-cli
在前面的学习过程中我相信你们已经对vue有了一定的了解,现在我们来看一下vue中的vue-cli. 学习这个我们首先需要的是node环境的,如果你的网络环境慢的话建议安装淘宝镜像,在cmd中输入 np ...
- Vue学习笔记七:Vue中的样式
目录 两种样式 class样式 内联样式 两种样式 Vue中使用样式方式有两种,一种是class样式,一种是内联样式也就是style class样式 class样式使用的方式有5种,HTML如下 &l ...
随机推荐
- PostgreSQL 打印详细错误调用栈 - pg_backtrace
一.用法 create extension pg_backtrace; select pg_backtrace_init(); 二.示例 postgres=# select count(*)/0.0 ...
- OpenAI Chat completion API 入门指南
Chat completion API 入门指南 ChatGPT 由 OpenAI 最先进的语言模型 gpt-3.5-turbo 提供支持. 使用 OpenAI API,您可以使用 GPT-3.5-t ...
- sqlserver 循环插入脚本
Declare @i int = 0 -- 说明需要插入的列值 WHILE @i< 1000000 BEGIN -- 需要写入数据的值 insert into ... set @i = @i + ...
- Golang make和new的区别及实现原理详解
在Go语言中,有两个比较雷同的内置函数,分别是new和make方法,二者都可以用来分配内存,那他们有什么区别呢?下面我们就从底层来分析一下二者的不同.感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助 ...
- ubuntu20.04安装fastdfs遇到的问题
说明:git clone在线安装与离线安装都不成功后,选择原来可以正常运行的fastdfs服务,进行tar打包下载,再在新项目上进行解压部署.但由于打包压缩动态库的软连接 失效,所以启动出现如下报错信 ...
- JS学习-Web Workers API接口
Web Workers API接口 通过使用Web Workers,Web应用程序可以在独立于主线程的后台线程中,运行一个脚本操作.这样做的好处是可以在独立线程中执行费时的处理任务,从而允许主线程(通 ...
- python调用c/c++方法
# python调用c/c++方法:一般先将c++代码转化为C类型dll(推荐使用静态dll,否则容易出现各种链接库问题;记得使用extern "C" _declspec(dlle ...
- element的upload手动submit前动态设置上传请求地址
标签地址绑定一个变量 动态修改上传请求地址代码: nextTick是DOM更新后触发,不使用nextTick直接submit,上传地址仍然会使用初始url地址 _this = this; this.u ...
- webpack5的基本用法
webpack的基本使用 webpack 本身功能有限: 开发模式: 仅能编译JS中的ES Module 语法 生产模式: 能编译ES Module 语法, 还能压缩JS代码 添加实例文件 npm i ...
- 一次eureka的事故
本地起了一个微服务(不知道怎么起的),导致注册到微服务上了,不知所措.. 想了下,杀死对应微服务的进程id就可以了(记不住啊!!)