热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

Vue中vif和vfor一起使用时的优先级

 问题:Vue2.0中v-if和v-for一起使用时报错,怎么解决呢?代码和报错信息如下  原因和解决办法:  在处于同一节点的时候,v-for优先级比v-if高。这意味着v-i

 问题: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 生效。



推荐阅读
  • 本文旨在探讨如何撰写高效且全面的工作总结,特别是针对数据库管理、Java编程及Spring框架的学习与应用。文章通过实例分析,帮助读者掌握工作总结的写作技巧,提高个人工作汇报的质量。 ... [详细]
  • electronvue使用electronupdater实现自动更新
    今天呢,给大家带来一篇干货满满的electron-vue自动升级的教程,话不多说,开始我的表演!配置文件package.jsonbu ... [详细]
  • 开发笔记:每篇半小时1天入门MongoDB——3.MongoDB可视化及shell详解
    开发笔记:每篇半小时1天入门MongoDB——3.MongoDB可视化及shell详解 ... [详细]
  • PHP 图形函数中实现汉字显示的方法
    本文详细介绍了如何在 PHP 的图形函数中正确显示汉字,包括具体的步骤和注意事项,适合初学者和有一定基础的开发者阅读。 ... [详细]
  • 页面预渲染适用于主要包含静态内容的页面。对于依赖大量API调用的动态页面,建议采用SSR(服务器端渲染),如Nuxt等框架。更多优化策略可参见:https://github.com/HaoChuan9421/vue-cli3-optimization ... [详细]
  • 告别jQuery:Bootstrap5即将全面脱离jQuery依赖及其他前端热点
    本文精选了2019年2月「前端大全」平台上的15篇热门文章,涵盖技术分享与资源推荐。关注前端大全,获取更多前沿信息,提升您的前端技能。 ... [详细]
  • 本文提供了一个详尽的前端开发资源列表,涵盖了从基础入门到高级应用的各个方面,包括HTML5、CSS3、JavaScript框架及库、移动开发、API接口、工具与插件等。 ... [详细]
  • [附源码]计算机毕业设计JAVAjsp医药管理信息系统
    [附源码]计算机毕业设计JAVAjsp医药管理信息系统项目运行环境配置:Jdk1.8Tomcat7.0MysqlHBuilderX(Webstor ... [详细]
  • Vue CLI 基础入门指南
    本文详细介绍了 Vue CLI 的基础使用方法,包括环境搭建、项目创建、常见配置及路由管理等内容,适合初学者快速掌握 Vue 开发环境。 ... [详细]
  • 函子(Functor)是函数式编程中的一个重要概念,它不仅是一个特殊的容器,还提供了一种优雅的方式来处理值和函数。本文将详细介绍函子的基本概念及其在函数式编程中的应用,包括如何通过函子控制副作用、处理异常以及进行异步操作。 ... [详细]
  • 使用Vue指令实现下拉菜单效果
    使用Vue指令实现下拉菜单效果模仿重庆红岩历史革命博物馆官网的导航栏内容和效果,使用Vue实现。官网地址如下:https:www.hongyan.info官网效果效果图片展示代码展 ... [详细]
  • 本文探讨了从旧框架迁移到Vue时,如何有效替换BroadcastChannel和dispatchEvent方法,提供了一种兼容且高效的解决方案。 ... [详细]
  • 利用Vue实现点击商品详情跳转功能的方法解析
    本文将详细介绍如何使用Vue框架实现从前端展示页面点击商品信息(如图片或文本)后,能够平滑跳转至该商品的详细信息页面。整个过程不仅涉及前端页面的设计与交互,还包括与后端接口的数据交互,旨在为开发者提供一种高效且实用的解决方案。 ... [详细]
  • 1.绑定htmlcss1.1对象语法:  传给v-bind:class一个对象,以动态地切换class   ... [详细]
  • 小编给大家分享一下Vue3中如何提高开发效率,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获, ... [详细]
author-avatar
何俊雨_127
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有