首页 > 其他分享 >Vue中v-if和v-for一起使用时的优先级

Vue中v-if和v-for一起使用时的优先级

时间:2022-11-10 16:44:47浏览次数:45  
标签:优先 Vue 优先级 vue 循环 一起 使用

 问题: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,优先级,vue,循环,一起,使用
From: https://www.cnblogs.com/xchlsl/p/16877511.html

相关文章

  • vue3:elementPlus的dailog组件title标题位置设置
     按照官网打开弹出窗想要的是这种效果但自己出现的是下面这种,title跑中间了,body区唯一一个控件,也跑到下面了   设置el-dialog__header高度后,高度的确发生了变......
  • vue前端分页
    偷懒了,其他都是老老实实后端分页的,就这一个,前端涉及音频和三个接口的获取,之前写在一起了没分开。要是还用后端分页,要重新写,想着数据量不大,干脆在前端分页了。 分页用的e......
  • vue实现音频列表,播放互斥
    用了最暴力的方法,直接遍历。先判断是否是需要播放的音频,不是的话再判断它是否正在播放,是的话就关掉这条音频。没什么逻辑可言,但是不知道怎么控制这条音频关闭,花了点时间写......
  • vuecli之dodo底部统计功能
    footer<template><divclass="todo-footer"><label><inputtype="checkbox"/></label><span>......
  • vue修改node_modules包代码部署提交
    1、安装patch-packagepatch-package包可以通过npm进行安装。npmipatch-package--save-dev或者也可以通过yarn进行安装。yarnadd--devpatch-packagepostinsta......
  • vuecli练习之添加一个todo操作
    涉及到三个组件 header<template><divclass="todo-header"><inputtype="text"placeholder="请输入你的任务名称,按回车键确认"@keyup.enter="add......
  • vue入门知识总结
    1.插值表达式{{}}  2.指令    2.1v-if、v-else、v-show、v-else-if      v-if:在切换过程中条件块内的事件监听器和子组件适当地被销毁和重......
  • vue v-for 使用
    html<divv-for="(item,index)informData.liuchengs":key="index"><el-form-itemlabel="流程:":prop="'liuchengs.'+index+'.no'":rules="{requ......
  • ant design vue table报错h is not defined
    报错原因使用table时由于columns数据太多,所以将columns中的数据拆分到一个单独的常量js文件中,又因为需要使用customRender,里面有<a-tag>之类的标签,需要使用jsx进行渲染,因......
  • VUE WEB怎么实现大文件上传
    ​ javaweb上传文件上传文件的jsp中的部分上传文件同样可以使用form表单向后端发请求,也可以使用ajax向后端发请求    1.通过form表单向后端发送请求     ......